JS Geocoder无法为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>