google maps - Async and await

Question

I want to draw markers for zipCode. But I can see only a few markers. I thought it was because of async and await, but I don't know where to add them. Somebody please help me.

var zipCode=[...]; //zipCode is array of zip codes.
function func1() {
    zipCode.forEach((item, index) => {
        drawZipCodeMarker(item.zip);
    });
}


function drawZipCodeMarker(zip){
       geocoder.geocode({'address':zip}, (results, status) => {
            console.log(zip);
            console.log(results);
            if (results != null) {
                var temp = new google.maps.Marker({position : results[0].geometry.location, map:map, title:zip});
            }
        });
    }

Answer 1

You are using Geocoding service of Maps JavaScript API. The services in Google Maps JavaScript API have a per session limit described in the documentation as.

Note: The additional rate limit is applied per user session, regardless of how many users share the same project. When you first load the API, you are allocated an initial quota of requests. Once you use this quota, the API enforces rate limits on additional requests on a per-second basis. If too many requests are made within a certain time period, the API returns an OVER_QUERY_LIMIT response code.

The per-session rate limit prevents the use of client-side services for batch requests, such as batch geocoding. For batch requests, use the Geocoding API web service.

source: https://developers.google.com/maps/documentation/javascript/geocoding

As far as I know, initially you have a bucket of 10 requests. Once the bucket is empty request is denied. The bucket is refilled at the rate 1 request per second. So, you have to throttle your geocoding requests in order to stay within allowed per session limits.

You should check the status of the response. If status is OVER_QUERY_LIMIT, so you exhausted your bucket and need retry the request. You can use Exponential Backoff approach for retrying logic (https://en.wikipedia.org/wiki/Exponential_backoff).

var zipCode=[...]; //zipCode is array of zip codes.
var delayFactor = 0;

function func1() {
    zipCode.forEach((item, index) => {
        drawZipCodeMarker(item.zip);
    });
}

function drawZipCodeMarker(zip) {
   geocoder.geocode({'address':zip}, (results, status) => {
       if (status === google.maps.GeocoderStatus.OK) {
           console.log(zip);
           console.log(results);
           if (results != null) {
               var temp = new google.maps.Marker({position : results[0].geometry.location, map:map, title:zip});
           }
       } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
           delayFactor++;
           setTimeout(function () {
               drawZipCodeMarker(zip)
           }, delayFactor * 1100);
       } else {
           console.log("Error: " + status);
       }
   });
}

I hope this helps!