Empty Array of google.maps.LatLng Objects

Question

First of all, I'm trying to create Heatmaps using google.maps.visualization.HeatmapLayer.

I'm trying to call the function codeAddress n times, and every time I call It, It's supposed to create a new google.maps.LatLng object in the global array locationsList , but when I try to return locationsList on the function getPoints it is empty. Any idea why?

var locationsList = [];
var counter = 0;

    function getPoints(latitude, longitude) {   
            codeAddress(" APIAI, SP, Brasil",2271.96);
            codeAddress(" Avaré, SP, Brasil",8.77);
            codeAddress(" Barueri, SP, Brasil",263.1);
            codeAddress(" Caçapava, SP, Brasil",2130.24);
            codeAddress(" Cajati, SP, Brasil",157.26);
            codeAddress(" Campinas, SP, Brasil",83.28);
            codeAddress(" CARAGUATATUBA, SP, Brasil",325.08);

        console.log("All codeaddress ended "+locationsList.length); // prints 0 (array disappears?)

          return locationsList;
        }

function codeAddress(endereco, peso) {   
    geocoder.geocode( { 'address': endereco}, function(results, status) {
      if (status == 'OK') {                     
    var thislat = results[0].geometry.location.lat();
    var thislong = results[0].geometry.location.lng();


        locationsList[this.contador] = {location: new google.maps.LatLng(thislat,thislong), weight: peso};
        console.log(locationsList.length);
        contador++;

                 } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

Iavor · Answer 1 · 2018-03-20T19:59:28.683

According to the Google Docs, geocoding requests are asynchronous:

Accessing the Geocoding service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request.

You can read more about how asynchronous code works here.

Regarding this code:

function getPoints(latitude, longitude) {   
  codeAddress(" APIAI, SP, Brasil",2271.96);
  codeAddress(" Avaré, SP, Brasil",8.77);
  codeAddress(" Barueri, SP, Brasil",263.1);
  codeAddress(" Caçapava, SP, Brasil",2130.24);
  codeAddress(" Cajati, SP, Brasil",157.26);
  codeAddress(" Campinas, SP, Brasil",83.28);
  codeAddress(" CARAGUATATUBA, SP, Brasil",325.08);

  console.log("All codeaddress ended "+locationsList.length); // prints 0 (array disappears?)

  return this.locationsList;
}

JavaScript does not wait for each geocode request to finish before executing the next call to codeAddress. So all the code in the getPoints function is executed immediately so by the time the code reaches return this.locationsList, the geocoding requests are still happening in the background and the locationsList array is still empty.

Update

Additionally, as @Preston mentioned in his comment:

The Geocoding Service in the Javascript API has a client-side rate limit that prevents too many requests being sent simultaneously. With too many undelayed sequential codeAddress() calls, you may run into OVER_QUERY_LIMIT errors. You may want to put some delay logic in your code if you encounter this.

Also, to add to this answer, the Geocoding Service in the Javascript API has a [client-side rate limit](https://developers.google.com/maps/documentation/javascript/usage#usage-limits-for-google-maps-javascript-api-services) that prevents too many requests being sent simultaneously. With too many undelayed sequential `codeAddress()` calls, you may run into `OVER_QUERY_LIMIT`errors. You may want to put some delay logic in your code if you encounter this. — Preston, Mar 20 '18 at 19:55

Empty Array of google.maps.LatLng Objects

1 Answers1

Update