google maps api multiple markers info window only showing last element
google-maps-api-3, google-maps-markers, infowindow, javascript
Solution
You may try this
function initialize() {
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var all = [
["Location 1", "Summerdale Rd", "Elon", "NC",
"27253", "36.150491", "-79.5470544"],
["Location 2", "7205 Olmstead Dr", "Burlington", "NC",
"27215", "36.069974", "-79.548101"],
["Location 3", "W Market St", "Graham", "NC",
"27253", "36.0722225", "-79.4016207"],
["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC",
"27253", "35.9826328", "-79.4165216"],
["Location 5", "415 Spring Garden St", "Greensboro", "NC",
"27401", "36.06761", "-79.794984"]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < all.length; i++) {
var name = all[i][0], address = all[i][1], city = all[i][2],
state = all[i][3], zip = all[i][4], lat = all[i][5], lng = all[i][6],
latlngset = new google.maps.LatLng(lat, lng);
var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';
var marker = new google.maps.Marker({
map: map,
title: city,
position: latlngset
});
google.maps.event.addListener(marker, 'click', (function(marker, content) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Problem
Possible Duplicate: Google Maps API Multiple Markers with Infowindows I am creating a Google Maps for a school project. Being a JavaScript newb, I got the code from a tutorial I found online. My problem is that I have an array of markers and multiple info windows, but whenever you click on a marker (doesn't matter which one), the info window only shows the content in the last element. Now I know this problem has been mentioned many times, unfortunately, I was unable to take the solutions mentioned in the other posts and apply it to my work. here a is a link to the map: link to google maps please let me know how to fix my problem. thanks. ``` <html> <head> <style> body { font-family: Helvetica; } .map-content h3 { margin: 0; padding: 5px 0 0 0; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"/> <script> // Set the Map variable var map; function initialize() { var myOptions = { zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP }; var all = [ ["Location 1", "Summerdale Rd", "Elon", "NC", "27253", "36.150491", "-79.5470544"], ["Location 2", "7205 Olmstead Dr", "Burlington", "NC", "27215", "36.069974", "-79.548101"], ["Location 3", "W Market St", "Graham", "NC", "27253", "36.0722225", "-79.4016207"], ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC", "27253", "35.9826328", "-79.4165216"], ["Location 5", "415 Spring Garden St", "Greensboro", "NC", "27401", "36.06761", "-79.794984"] ]; var infoWindow = new google.maps.InfoWindow; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); // Set the center of the map var pos = new google.maps.LatLng(36.0621881, -79.5101063); map.setCenter(pos); function infoCallback(infowindow, marker) { return function() { infowindow.open(map, marker); }; } function setMarkers(map, all) { for (var i in all) { var name = all[i][0]; var address = all[i][1]; var city = all[i][2]; var state = all[i][3]; var zip = all[i][4]; var lat = all[i][5]; var lng = all[i][6]; var latlngset; latlngset = new google.maps.LatLng(lat, lng); /*var marker = new google.maps.Marker({ map: map, title: city, position: latlngset });*/ var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>'; /*var infowindow = new google.maps.InfoWindow(); for(var i=0; i<all.length; i++) { infowindow.setContent(content); google.maps.event.addListener( marker, 'click', infoCallback(infowindow, marker) ); }*/ var infowindow = new google.maps.InfoWindow(); for (var i = 0; i < all.length; i++) { var marker = new google.maps.Marker({ map: map, title: city, position: latlngset }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(content); infowindow.open(map, marker); } })(marker, i)); } } } // Set all markers in the all variable setMarkers(map, all); }; // Initializes the Google Map google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas" style="height: 100%; width: 100%;"></div> </body> </html> ```