Variable inside for-loop having same value for all iterations

Question

In the below code, inside for loop variable 'i' seems to have the value 5 for all iterations. What have i done wrong? Code: http://pastebin.com/aHZ6HFKK

  var message = ['one', 'five', 'seven', 'nine', 'eight'];
  var loc = ["Moscow", "Delhi", "New York", "Tokyo", "Barcelona"];
  var geocoder = new google.maps.Geocoder();
  var i = 0;
  function initialize()
  {
    var p;
    var mapOptions = {zoom: 4, center: new google.maps.LatLng(22,75)};

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    for (i = 0; i < 5; i++)
    {
      geocoder.geocode({'address': loc[i]}, function(results, status){
        if(status == google.maps.GeocoderStatus.OK)
        {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
        }
        attachSecretMessage(marker, i);
      });
    }
  }

  function attachSecretMessage(marker, num)
  {
    var infowindow = new google.maps.InfoWindow({
      content: message[num]
    });

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

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

Search for "loop closure" and you will find a lot of answers that show you what the issue is and what to do. — jfriend00, Mar 23 '14 at 19:51

radu.cigmaian · Answer 1 · 2014-03-23T20:04:17.927

This happens because your use variable i in the callback. So firstly the for loop is executing lunching the requests resulting in var i becoming 5 then the callback functions are executed.

A possible solution would be:

var p;
var readyRequests = 0;
var mapOptions = {zoom: 4, center: new google.maps.LatLng(22,75)};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

for (i = 0; i < 5; i++)
{
  geocoder.geocode({'address': loc[i]}, function(results, status){
    if(status == google.maps.GeocoderStatus.OK)
    {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    }
    attachSecretMessage(marker, readyRequests);
    readyRequests++;
  });
}

Variable inside for-loop having same value for all iterations

1 Answers1