1

I am using google-maps in my react app and want to create a location search which will display options only when atleast 3 keys are entered. Google maps autocomplete starts showing options even when we enter 1 key. How can I restrict this behaviour?

const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(40.6700, -73.9400)
});
const autocomplete = new this.state.google.maps.places.Autocomplete(locationFilter);
Naveen Attri
  • 85
  • 8

1 Answers1

1

If you're using Google's Autocomplete JS library, I don't believe you can edit the settings of their implementation.

Instead I would suggest calling the Google Places Autocomplete API (using AJAX) - and only calling it after 3 keys have been entered client side:

https://developers.google.com/places/web-service/autocomplete

This also allows for additional functionality to your form. You can add a debounce to your form. This prevents your app from hammering the endpoint due to a request being sent after every keystroke. Instead you could wait ~300ms or so after they have stopped typing to send the request:

Perform debounce in React.js

HarveyD
  • 60
  • 6