Debouncing Google Maps Autocomplete

Question

Good day.

Right now I'm using google maps to autocomplete addresses on my service. This is the code:

autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('address_field')),
    {
        types: ['address'],
        componentRestrictions: {country: 'us'}
    }
);

And as I type, it pings the google server for suggestions.
These pings are taking up a lot of tokens.

So I'm thinking - is there a way to debounce the request?

I tried debouncing it with the debounce library, but that obviously doesn't work.
Also tried adding a delay:300 to the options object, still nothing.

Any help would be greatly appreciated

Edit: After the changes to Google Maps's pricing in May 2019. You do not longer pay per request, but rather per autocomplete session. It doesn't matter how many search queries the user types in, they all will still be counted as one session. Thus making this question moot.

Answer 1

You can customize Google map autocomplete component with Retrieving Autocomplete Predictions and Place Details

Here is a simple demo with React.Custom Google Map Autocomplete

Hope this can help you, thanks.

const handleSearch = () => {
  autocompleteService.getPlacePredictions(
  {
    input: text,
    origin: latLng,
    componentRestrictions: {
      country: "NG", // country: string | string[];
    }
  }, handleSuggestions);
}