简体   繁体   中英

Debouncing Google Maps Autocomplete

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.

As of now, Google Maps Autocomplete does not support debounce on API call. Though an issue related to this has been already registered.

https://code.google.com/p/gmaps-api-issues/issues/detail?id=5831

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);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM