useAutocompleteService.md

useAutocompleteService Hook

React hook to use the Google Maps Places Autocomplete Service in any component.

Usage

When initializing the <GoogleMapsProvider>, include the places library like this: libraries={['places']}.

const autocompleteService = useAutocompleteService();

const request = {input: inputValue}; // google.maps.places.AutocompletionRequest

autocompleteService?.getPlacePredictions(
  request,
  (
    predictions: google.maps.places.AutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) => {
    if (status !== google.maps.places.PlacesServiceStatus.OK || !predictions) {
      return;
    }
    // Do something with predictions
  }
);

Parameters

AutocompleteProps

Needs a reference to an Input field, and has some optional properties. Check: AutocompletionRequest interface or QueryAutocompletionRequest interface.

Return value

Returns an Autocomplete Service instance to use directly.

google.maps.places.AutocompleteService