Autocomplete example with Places API (new)

[yannagrebah]

Greetings, I have currently implemented the Autocomplete example (seen in https://visgl.github.io/react-google-maps/examples/autocomplete) precisely the classic version with some minimal edits.

const AddressInput = () => {
  const [placeAutocomplete, setPlaceAutocomplete] =
    useState<google.maps.places.Autocomplete | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const places = useMapsLibrary("places");

  useEffect(() => {
    if (!places || !inputRef.current) return;

    const options = {
      fields: ["geometry", "name", "formatted_address"],
    };

    setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options));
  }, [places]);

  useEffect(() => {
    if (!placeAutocomplete) return;

    placeAutocomplete.addListener("place_changed", () => {
      console.log(placeAutocomplete.getPlace());
    });
  }, [placeAutocomplete]);
  return <Input ref={inputRef} placeholder="Search address" />;
};

As I understood, this implementation uses the Legacy version of Places API, now I know to switch it to Places API (new) it's all a matter of migration (following https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete#autocomplete-widget).
So far what I figured out to replace was google.maps.places.Autocomplete with google.maps.places.PlaceAutocompleteElement, but after that I am properly stumped.
First hurdle is to instantiate a new PlaceAutocompleteElement and it seems like PlacesLibrary has no property PlaceAutocompleteElement, not only that but new google.maps.places.PlaceAutocompleteElement() fires an error not being a constructor.
Second problem is changing addListener to addEventListener as mentioned in the doc poses some typing problem. Normally, the implementation would be like this:

placeAutocomplete.addEventListener("gmp-placeselect", async ({place}) => {
      await place.fetchFields({
        fields: ["displayName", "formattedAddress", "location"],
      });
    });

But {places} does not exist in the parameters (being of type Event for some reason) which makes it unusable as well.
Now, I do not know if this is not implemented in the library yet, or I am following the wrong trail. All I want is to add a simple autocomplete search box widget with the new Places API.
All help is much appreciated, thanks in advance!

[usefulthink]

The first thing to know is that the PlaceAutocompleteElement is currently only available in the alpha and beta release-channels, and it isn't quite clear yet when it will be ready for the stable releases. When the constructor can't be found, that would typically be because you're loading a stable (weekly/monthly/quarterly) release instead of alpha or beta.

There seems to be a couple of things wrong with that at the moment. For example, the @types/google.maps package has a couple of issues related to the PlaceAutocompleteElement class (see my comment here: googlemaps/js-api-loader#894 (comment)). Another thing is that the EventTarget interface isn't properly typed at the moment either, so you would have to do something like this for now to make typescript happy (at least it seems to work without errors this way):

placeAutocomplete.addEventListener(
  "gmp-placeselect",
  async (event: google.maps.places.PlaceAutocompletePlaceSelectEvent) =>
    handlePlaceSelected(event.place)
);

Another issue is that the gmp-placeselect event is already outdated, but the newer gmp-select event is only available in the alpha channel for now.

So, to summarize – I would recommend you go a different route and use the AutocompleteCustom or AutocompleteCustomHybrid examples as a starting point and implement the user-interface part of that yourself. There are pretty good combo-box components for most UI libraries that should be compatible. For those examples, the migration would mostly be moving from AutocompleteService to AutocompleteSuggestion as described in this article.

I would also love to migrate our examples to use the new Places API, so if you get something working, please consider dropping us a PR for that.

[yannagrebah]

I figured using PlaceAutocompleteElement would still be in alpha as the whole Search box widget seem to be still experimental, hopefully it gets finished in the near future. I went as suggested with using the examples present in AutocompleteCustom and AutocompleteCustomHybrid, and honestly it wasn't as hard as I expected it to migrate, lol.
I'll try to PR an implementation using the new Places API as soon as possible, in the meantime, here are a few notes to consider for anybody trying to do the same as me:

• Remove both autocompleteService and placesService, fetching autocomplete now goes through places.AutocompleteSuggestion.fetchAutocompleteSuggestions, remove useMap() as well since the function is agnostic of whether there is a map or not. Takes in parameters, a request of type google.maps.places.AutocompleteRequest.
• fetchAutocompleteSuggestions returns an array of suggestion, now to fetch the fields of a suggestion, you need to use:

const { place } = await suggestion.placePrediction
            .toPlace()
            .fetchFields({
              fields: ["location", "formattedAddress",...fields],
            });

• predictionsResults now should be of type google.maps.places.PlacePrediction, other than that it's mostly works all the same.
  That's all I can think of now from the top of my head, your best bet is to keep the migration docs in hand.
  Thanks a lot for the help!

[alizzada]

Hi. I just recently noticed that without //@ts-ignore header ({placePrediction}) will not be found in anywhere and compiler will complain. So just add //@ts-ignore before addEventListener and it will work.

const placeAutocomplete = this.addresstext.nativeElement as google.maps.places.PlaceAutocompleteElement;

// @ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({placePrediction }) => {
  this.placeChanged(placePrediction);
});