Question

I am trying to produce multiple InfoWindows with the following code: EDIT: To clarify, I want all windows to be open at the same time.

    for (var i = 0; i < 3; i++) {
      var markerOptions = {position:point[i], map:map};
      var marker = new google.maps.Marker(markerOptions);
      content = "Hello " + i;
      infowindow[i] = new google.maps.InfoWindow({content: content}); 
      google.maps.event.addListener(marker, 'mouseover', function()
      {
        infowindow[i].open(map,this);   
      });
    }

(full source)

However, I get the following error in Chrome: Uncaught TypeError: Cannot call method ‘open’ of undefined.

When I use a plain variable “infowindow” instead of the array, the single infowindow appears as expected.

Answer 1

To accomplish what I want, I learned that a closure is needed:

for (var i = 0; i < 3; i++) 
{
  (function(i) {
    var markerOptions = {position:point[i], map:map, html:'Hello' };
    var marker = new google.maps.Marker(markerOptions);

    google.maps.event.addListener(marker, 'mouseover', function()
    {
        infowindow.setContent(this.html); // this is the trick: html attribute on markerOptions :), I used a array here
        infowindow.open(map,this);   
    });
  })(i);
}