Variables redefined in a for loop

Question

I am trying to add markers to google maps using V3. I have my places in json object (places):

var num_places = places.length; for(var i = 0; i < num_places; i++) { place_lat_lng = new google.maps.LatLng(places[i].lat, places[i].lng); var infowindow = new google.maps.InfoWindow({ content: '<h2>' + places[i].name + '</h2><p>' + places[i].body + '</p>' }); var marker = new google.maps.Marker({ position: place_lat_lng, map: mymap, title: places[i].name, zIndex: i }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(mymap, marker); }); } 

The code inserts markers, but when I click on any of them, the info show is shown (and moves the map) always to the last marker in the list.

I tried using an array for infoWindow:

 var infoWindow = new Array(); for(var i = 0; i < num_places; i++) { [...] var infowindow[i] = new google.maps.InfoWindow({ content: '<h2>' + places[i].name + '</h2><p>' + places[i].body + '</p>' }); [...] google.maps.event.addListener(marker, 'click', function() { infowindow[i].open(mymap, marker); }); } 

But nothing changes.

Where am I mistaken?

Answer 1

In JavaScript, only functions create a new scope / close. Therefore, you have only one variable, infowindow , which is written to the internal function, but in the end will point to the last window. Use the self-service feature to configure a new circuit:

 for (var i = 0; ...) { (function() { var infowindow = ...; })(); } 

Note that the value of i will still not be written separately. This doesn't seem like you at the moment, but if you do, pass it to a function to create a local version inside the function:

 (function(i) { // this is the new local i with the value passed in from the outside // ...accessible here })(i); // this is the outer i 

Answer 2

Change this:

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

in

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

The problem is that your infowindow variable gets recreated in a loop every time, and when the click handler fires, it looks for a local closure for the most recent version. The updated code creates a new closure that will contain a version of infowindow that is unique to this loop iteration.