JS Geocoder cannot assign Global Variable for Google Maps Variable

Question

i have variable array 2 dimentional:

var locations = new Array(3);
for (var i = 0; i < 3; i++) {
    locations[i] = ['1', '2', '3'];
}

and i have array with name Place inside

data = ["Terogong, Indonesia", "Blok M, Indonesia", "Cipinang, Indonesia"]

when i use Geocoder to search Lat and Lang, then its fill Locations[] with name place, Lat and Lang:

for (var i = 0; i < data.length-1; i++) { 
    var c = data[i];
    geocoder.geocode( { 'address': data[i] + ", indonesia"}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            //alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
            locations[i] = [c , results[0].geometry.location.lat(), results[0].geometry.location.lng()];
            alert(locations[i]);
        } else {
            alert("Something got wrong " + status);
        }
    });
}

and then, when i alert(locations[0]) its apear 1.

why this is happen??

Answer 1

The geocoder is asynchronous. One option is to use function closure to associate the variables in the request with the callback function:

for (var i = 0; i < data.length; i++) {
    geocoder.geocode({
        'address': data[i] + ", indonesia"
    }, (function(data, i) { return function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            locations[i] = [data, results[0].geometry.location.lat(), results[0].geometry.location.lng()];
            var mark = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                title: data
            });
            // alert(locations[i]);
        } else {
            alert("Something got wrong " + status);
        }
    }}(data[i], i))); // has function closure on data[i] as data, i (as i)
}

working fiddle

code snippet:

var geocoder = new google.maps.Geocoder();
var map;
var data = ["Terogong, Indonesia", "Blok M, Indonesia", "Cipinang, Indonesia"];

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();
  var locations = new Array(3);
  for (var i = 0; i < 3; i++) {
    locations[i] = ['1', '2', '3'];
  }
  for (var i = 0; i < data.length; i++) {
    geocoder.geocode({
      'address': data[i] + ", indonesia"
    }, (function(data, i) {
      return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
          locations[i] = [data, results[0].geometry.location.lat(), results[0].geometry.location.lng()];
          var mark = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: data
          });
        } else {
          alert("Something got wrong " + status);
        }
      }
    }(data[i], i)));
  }

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

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>