Google Map Api - Popup is opening on only one point , not on others

Question

I have 3 Points in my Map, France, Paris and Greenland.

Popup is opening only on paris, not on others

Here is my code:

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
    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:60.05,longitude_chargement:-43.1667,title:"THIS IS FRANCE"},{id:2,latitude_chargement:45.7604,longitude_chargement:5.68552,title:"THIS IS GREENLAND"},{id:3,latitude_chargement:48.853873,longitude_chargement:2.351074,title:"THIS IS PARIS"}];


    for(i = 0; i < arr.length; i++) 
    {  
        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'
        });


      var contentString = '<div id="content">'+arr[i].title+'</div>';

      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    }


    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });

    marker.setMap(map);



}

google.maps.event.addDomListener(window, 'load', initialize);

score 2 · Answer 1 · edited May 23 '17 at 12:03

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

Ajith S · Accepted Answer · 2013-12-12T10:07:50.910

Here is the working code,

<html>
    <head>
        <title>Log In Page</title>
        <script type="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);

            function initialize()
            {
                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>
        <div id="googleMap"></div>
    </body>
</html>

Also your France and Greenland coordinates were swapped

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

This is a common closure problem.

Just replace your loop by :

for(i = 0; i < arr.length; i++) 
{
    (function(i) {
         //Your code
    })(i);
}

edited May 23 '17 at 12:11

Community

1
1

answered Dec 12 '13 at 08:38

AlexB

7,302
12
56
74

Google Map Api - Popup is opening on only one point , not on others

3 Answers3

Linked