Question

I am new to Javascript coding and have looked for this information in many places but haven’t found one working solution, hence I am posting this question here.

In a for loop I am trying to request POIs in a region (leg of the route) using –

service.search(request, callback);

where request includes parameters like location and type of POI queried. I have implemented the callback function as below –

function callback(myResults, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        alert('myResults: ' + myResults.length);
        // entire remaining code here, where I do some processing on the POIs.
    }   
}

This code is working and at each leg of the route I get to see the POIs, and also number of POIs is displayed using alert.

My issue is that I do not want to process the “myResult” here for each leg, but collect all the results for the entire route (made up of many legs) and then do the processing at once.

1. I first thought of creating a global variable (“myPOIs”) and append “myResults” at each leg and once the entire route is parsed, then to process this myPOIs, but I am not able (or I dont know how) to append this myResults to a global variable myPOIs.

2. The other option, I was thinking of is getting a return (myResults) from the callback function and then collecting (appending) all the results.

The only difference between 1 and 2 is that, in 1, its a global variable I will be appending myResults to within the if condition, and in 2, if the if condition is true then return the myResults to the service.search and then collect the results there.

I tried using myPOIs.push(myResults) and a few other options, but when I check the myPOIs.length it is always null. I really dont know how to get the myResults out of the callback function.

Any suggestion/ throughts/ help will be very useful for me.

And I want to use only javascript and nothing else for this.

Thanks a lot in advance,
axs

Answer 1

Assuming you are calling the search something like this:

for (var i = 0; i < legs.length; i++) {
    service.search(legs[i], callback);
}

then you can do this by keeping track of all the results, and the number of times you’ve been called back:

var callbacksOutstanding = legs.length;
var allPlaces = [];
var callback = function(legPlaces, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        allPlaces.push.apply(allPlaces, legPlaces);
    } 
    if (--callbacksOustanding === 0) {
        processPlaces(allPlaces);
    }
};
for (var i = 0; i < legs.length; i++) {
    service.search(legs[i], callback);
}

Where processPlaces is some function you’ve written to process the complete array of PlaceResult objects.

Now the three var statements there are not global variables if this is all wrapped in a function (as it should be), because in Javascript you can and should define functions inside other functions. And if you do so, the inner functions will have access to variables in the outer functions. So for me this might look like this:

function findAndProcessPlaces(legs) {
    var callbacksOutstanding = legs.length;
    var allPlaces = [];
    var callback = function(legPlaces, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            allPlaces.push.apply(allPlaces, legPlaces);
        } 
        if (--callbacksOustanding === 0) {
            processPlaces(allPlaces);
        }
    };
    for (var i = 0; i < legs.length; i++) {
        service.search(legs[i], callback);
    }
}

NB: The allPlaces.push.apply line performs an in-place concatenation of one array to another. You could also write:

allPlaces = allPlaces.concat(legPlaces)

at this point.