Google Maps JavaScript API markers & infowindows

Question

I'm facing an issue with the open method on infoWindow object.

I want to set all my map utility objects dynamically but when the open method is called it raises me an error because the infoWindow object associated is undefined.

Here is my code :

    // Markers & infoWindows
    var markers = [];
    var infoWindows = [];

    for(var i=0; i<myList.length; i++) {
        markers.push(
            new google.maps.Marker({
                position: myList[i].coord,
                map: map,
                title: myList[i].city
            })
        );
        infoWindows.push(
            new google.maps.InfoWindow({
               content: myList[i].address
            })
        );
        markers[i].addListener('click', function() {
            infoWindows[i].open(map, markers[i]);
        });
    }

[ Where myList is just an arry of JSON formated objects. ]

All the markers and infoWindows are well set. I can access their properties and print them to the console.

But as I said the infoWindows[i] is typed undefined so the open method isn't found. A contrario I can access and print the content attribute of this infoWindows[i] object. Seems weird to me...

If someone is able to explain me I will be happy :)

score 0 · Accepted Answer · edited May 23 '17 at 10:27

Related question: Google Maps JS API v3 - Simple Multiple Marker Example

When the loop completes i is left at infoWindows.length, which is past the end of the array. One way to fix it is with function closure on i:

markers[i].addListener('click', (function(i) {
return function() {
  infoWindows[i].open(map, markers[i]);
}}(i)));

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  // Markers & infoWindows
  var markers = [];
  var infoWindows = [];

  for (var i = 0; i < myList.length; i++) {
    markers.push(
      new google.maps.Marker({
        position: myList[i].coord,
        map: map,
        title: myList[i].city
      })
    );
    infoWindows.push(
      new google.maps.InfoWindow({
        content: myList[i].address
      })
    );
    markers[i].addListener('click', (function(i) {
      return function() {
        infoWindows[i].open(map, markers[i]);
      }
    }(i)));

    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var myList = [{
  coord: {
    lat: 42,
    lng: -72
  },
  city: "Somewhere",
  address: "Somewhere"
}, {
  coord: {
    lat: 40.7127837,
    lng: -74.0059413
  },
  city: "New York, NY, USA",
  address: "New York, NY, USA"
}, {
  coord: {
    lat: 40.735657,
    lng: -74.1723667
  },
  city: "Newark, NJ, USA",
  address: "Newark, NJ, USA"
}];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Google Maps JavaScript API markers & infowindows

1 Answers1