Google Maps API v3 multiple clickable markers - google-maps

Question

I'm trying to put multiple markers on Google Maps but making them each refers to an URL. I put all the markers in a loop but only the last one is executed. I want all of them to work.
Here is my code:
<script type="text/javascript">
function initialize() {
var json = [
{
"title": "title1",
"lat": 46.077428,
"lng": 18.229837
},
{
"title": "title2",
"lat": 46.042229,
"lng": 18.227134
},
{
"title": "title3",
"lat": 46.082831,
"lng": 18.225911
},
{
"title": "title4",
"lat": 46.092058,
"lng": 18.185645
},
{
"title": "title5",
"lat": 46.075493,
"lng": 18.22885,
"description": "some description to the 5th element",
"url": "http://www.pannon-home.hu/"
},
{
"title": "title6",
"lat": 46.075344,
"lng": 18.227713,
"description": "some description to the 6th element",
"url": "http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"),myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: firstmap,
title: data.title,
url: data.url,
icon: 'home.png'
});
}
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function() {
location.assign(marker.url);
});
}
</script>

Answer 1

create a new marker object
and marker.setMap(map);

Answer 2

Too much of your logic lies outside of your for loop, causing much of your logic to only be applied to the last marker. Try this adjustment:
<script type="text/javascript">
function initialize() {
var json = [
{
"title":"title1",
"lat":46.077428,
"lng":18.229837
},
{
"title":"title2",
"lat":46.042229,
"lng":18.227134
},
{
"title":"title3",
"lat":46.082831,
"lng":18.225911
},
{
"title":"title4",
"lat":46.092058,
"lng":18.185645
},
{
"title":"title5",
"lat":46.075493,
"lng":18.22885,
"description":"some description to the 5th element",
"url":"http://www.pannon-home.hu/"
},
{
"title":"title6",
"lat":46.075344,
"lng":18.227713,
"description":"some description to the 6th element",
"url":"http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom:12,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"), myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position:latLng,
map:firstmap,
title:data.title,
url:data.url,
icon:'home.png'
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function () {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function () {
location.assign(marker.url);
});
}
}
</script>