Question

I want to put markers on a map. The source is a json request, which returns cities.

I’ve got a function (sencha) that returns the records (asynchronous) and a function (google maps api) that returns the lng, lat for specific cities (asynchronous) and a method (google maps), that puts markers on the map.

The result should be a marker on the map at the location calculated by google with a caption retrieved from the record.

load records

offers = App.stores.offers.load({
    callback: function(records, operation, success){...}
})

get location

geocoder = new google.maps.Geocoder();
geocoder.geocode(
  {'address': adress},
  function(results, status) {...}
}

and set the marker

marker = new google.maps.Marker({
  map: map,
  position: loc,
  title: text
});

What I wan’t to do is, load the record, loop over each record, find out about location of the city and put a marker there.

synchronous I would do:

   records = App.stores.offers.load();
   for (var i=0; i < records.length; i++) {
     setMarker( map, getLocation(records[i].data["city"]), cords[i].data["text"]);
   }

What’s the right way to put it together with the asynchronous functions?

Answer 1

I don’t really know what does the App.stores.offers.load function do exactly but I’ll assume its callback function arguments contain loading results in records variable. In this case loop through records inside callback function and for each call geocode, and on geocode’s callback place markers (nothing wrong with this).

EDIT: this is untested and probably not most efficient but should work:

offers = App.stores.offers.load({
    callback: function(records, operation, success){
        if (success) {//or sth like this
            var complete;
            for (var i = 0; i < records.length; i++) {
                complete = false;
                geocoder.geocode( {'address': records[i].adress},
                  function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            title: results[i].text,
                            position: results[0].geometry.location
                        });
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                    complete = true;
                });
                while (!complete);
            }
        }
    }
});