Google Map API issue with creating unique info windows

Question

Maybe it is just late but I'm having issue showing info windows on my google map. I have few test points of interests, when I add markers and click events to these markers I always get a popup for Location 5. How do I properly tie in individual info windows to each marker? I tried creating info windows and markers and storing them in pointsOfInterests array but that didn't seem to help.

Thank you, R

 var pointsOfInterests = [
    ['Location 1', 43.386815, -79.8142324, 1 , '<div id="content1"><div id="siteNotice1"></div><div id="bodyContent1"><h1 id="firstHeading1" class="firstHeading">l1</h1></div></div>'],
    ['Location 2', 43.367015, -79.8241324, 2 , '<div id="content2"><div id="siteNotice2"></div><div id="bodyContent2"><h1 id="firstHeading2" class="firstHeading">l2</h1></div></div>'],
    ['Location 3', 43.357015, -79.8341324, 3, '<div id="content3"><div id="siteNotice3"></div><div id="bodyContent3"><h1 id="firstHeading3" class="firstHeading">l3</h1></div></div>'],
    ['Location 4', 43.347015, -79.8541324, 4, '<div id="content4"><div id="siteNotice4"></div><div id="bodyContent4"><h1 id="firstHeading4" class="firstHeading">l4</h1></div></div>'],
    ['Location 5', 43.377015, -79.8341324, 5, '<div id="content5"><div id="siteNotice5"></div><div id="bodyContent5"><h1 id="firstHeading5" class="firstHeading">l5</h1></div></div>'],
  ];


 function setMarkers(map) {
    // Adds markers to the map.
    for (var i = 0; i < pointsOfInterests.length; i++) {

     var pointsOfInterest = pointsOfInterests[i];

     var marker = new google.maps.Marker({
        position: {lat: pointsOfInterest[1], lng: pointsOfInterest[2]},
        map: map,
        title: pointsOfInterest[0],
        zIndex: pointsOfInterest[3]
      });

      marker.addListener('click', function() {
         var infoWindow = new google.maps.InfoWindow({
         content: pointsOfInterest[0]
         });

         var pos = {
           lat: pointsOfInterest[1],
           lng: pointsOfInterest[2]
         };

         infoWindow.setPosition(pos);
         infoWindow.open(map, marker);
      });
    }
  }

score 1 · Answer 1 · answered Nov 26 '17 at 04:58

You have to create a closure, otherwise, all your listeners will use the last value in the array.

var pointsOfInterests = [
['Location 1', 43.386815, -79.8142324, 1 , '<div id="content1"><div id="siteNotice1"></div><div id="bodyContent1"><h1 id="firstHeading1" class="firstHeading">l1</h1></div></div>'],
['Location 2', 43.367015, -79.8241324, 2 , '<div id="content2"><div id="siteNotice2"></div><div id="bodyContent2"><h1 id="firstHeading2" class="firstHeading">l2</h1></div></div>'],
['Location 3', 43.357015, -79.8341324, 3, '<div id="content3"><div id="siteNotice3"></div><div id="bodyContent3"><h1 id="firstHeading3" class="firstHeading">l3</h1></div></div>'],
['Location 4', 43.347015, -79.8541324, 4, '<div id="content4"><div id="siteNotice4"></div><div id="bodyContent4"><h1 id="firstHeading4" class="firstHeading">l4</h1></div></div>'],
['Location 5', 43.377015, -79.8341324, 5, '<div id="content5"><div id="siteNotice5"></div><div id="bodyContent5"><h1 id="firstHeading5" class="firstHeading">l5</h1></div></div>'],
];


function setMarkers(map) {
    // Adds markers to the map.
    for (var i = 0; i < pointsOfInterests.length; i++) {
        (function(index){
            var pointsOfInterest = pointsOfInterests[index];

            var marker = new google.maps.Marker({position: {lat: pointsOfInterest[1], lng: pointsOfInterest[2]},
                            map: map,
                            title: pointsOfInterest[0],
                            zIndex: pointsOfInterest[3]
                         });

             marker.addListener('click', function() {
                var infoWindow = new google.maps.InfoWindow({
                content: pointsOfInterest[0]
             });

                var pos = {
                  lat: pointsOfInterest[1],
                  lng: pointsOfInterest[2]
                };

                infoWindow.setPosition(pos);
                infoWindow.open(map, marker);
             });
         })(i);
    }
}

Google Map API issue with creating unique info windows

1 Answers1