Assigning InfoWindows array elements results undefined

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.

score 1 · Answer 1 · answered Apr 09 '12 at 20:14

You can create just one infoWindow. I used on a project like this:

var infowindow = new google.maps.InfoWindow();

for (var i = 0; i < 3; 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);   
    });
}

Yes, it works, now I should have said I want all three infowindows open together (I edited the question) — Heitor Chang, Apr 09 '12 at 20:29

score 0 · Answer 2 · answered Apr 09 '12 at 20:13

have you output infowindow[i] to the console(firebug) to see if it is what you are expecting? I think generally the way to do this is generate one infowindow object and reuse/move and change the content of the infowindow.

This link might be handy:http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/

Ramesh Kotha · Answer 3 · 2012-04-09T20:36:18.963

working sample

       var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      var infowindow = new google.maps.InfoWindow();
      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        point = [];
        point[0] = new google.maps.LatLng(0.0,0.0);
        point[1] = new google.maps.LatLng(0.0,10.0);
        point[2] = new google.maps.LatLng(0.0,20.0);


          for (var i = 0; i < 3; i++) {
                var content = "Hello"+i;
                addInfowindows(point[i], content )             
          }
      }
function addInfowindows(point, content){


          var markerOptions = {position:point, map:map};
          var marker = new google.maps.Marker(markerOptions);


          google.maps.event.addListener(marker, 'mouseover', function()
          {
            infowindow.setContent(content);
            infowindow.open(map,this);   
          });


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

This results in Hello2 for all windows, I am looking for 1, 2, 3 (I'm adding that to my jsfiddle) — Heitor Chang, Apr 09 '12 at 20:18
I'm really sorry I didn't say, I want all 3 infowindows opened at once. The question was edited but it's not immediately obvious. I don't want to trouble you more, it's OK if you wish not to follow up anymore. — Heitor Chang, Apr 09 '12 at 20:41

score 0 · Accepted Answer · edited May 23 '17 at 11:56

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);
}

Assigning InfoWindows array elements results undefined

4 Answers4