Google Map Api - Popup Is Opening On Only One Point , Not On Others
Solution 1:
Here is the working code,
<html><head><title>Log In Page</title><scripttype="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);
functioninitialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var arr = [{id:1,latitude_chargement:45.7604,longitude_chargement:5.68552,title:"THIS IS FRANCE"},{id:2,latitude_chargement:60.05,longitude_chargement:-43.1667,title:"THIS IS GREENLAND"},{id:3,latitude_chargement:48.853873,longitude_chargement:2.351074,title:"THIS IS PARIS"}];
var contentString;
var infowindow = new google.maps.InfoWindow();
for(i = 0; i < arr.length; i++)
{
contentString = '<div id="content">'+arr[i].title+'</div>';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
map : map,
title: arr[i].title,
icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
content:contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
infowindow.setContent(this.content);
});
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script><style>#googleMap {
width:600px;
height:600px;
}
</style></head><body><divid="googleMap"></div></body></html>Also your France and Greenland coordinates were swapped
Solution 2:
It is a recurrent misunderstanding. You have only one infowindow, its content is updated three times (in your "for" loop) but it remains in the state it is after the third update and never changes after, especially when you open it clicking on a marker (one infowindow, same content ; by the way I don't understand why it is Paris since Paris appears first in your array...).
Two solutions here : you need to store your infoWindows reference for each marker (build an infowindow array for example), or use only one and update its content in your event listener : when a user clicks on a marker, you fetch the appropriate content, fill the infowindow with it and then display it.
This link saved my day on this subject, very precise, very educational :
http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
..and from StackOverflow : Multiple Google Maps infowindow
Good luck with it
Solution 3:
This is a common closure problem.
Just replace your loop by :
for(i = 0; i < arr.length; i++)
{
(function(i) {
//Your code
})(i);
}
Post a Comment for "Google Map Api - Popup Is Opening On Only One Point , Not On Others"