Migrate to the new Autocomplete Widget

This migration guide is for developers who have an integration with the Place Autocomplete Widget (Preview) prior to version 3.59.8. This guide shows you the changes you need to make to use the latest version.

Changes

• The gmp-placeselect event has been renamed to gmp-select.
• The gmp-select event now returns a placePrediction instance rather than a place instance. PlacePrediction.toPlace() returns the proper Place object.
• The gmp-requesterror event is now gmp-error.

Migration steps

To migrate your Place Autocomplete Widget integration to the latest version, do the following:

1. Verify that Places API (New) is enabled for your project in the Cloud console.
2. Add Places API (New) to the API restrictions list for the API key that you're using.
3. In your development environment, perform and test the following changes:

Update event listener

Change gmp-placeselect to gmp-select as shown in the following snippets:

Before

autocompleteElement.addEventListener('gmp-placeselect', (event) => {
  console.log(event.place);
});

After

autocompleteElement.addEventListener('gmp-select', (event) => {
  console.log(event.placePrediction.toPlace());
});

Change componentRestrictions to includedRegionCodes

Change instances of componentRestrictions to use the includedRegionCodes field, as shown in the following snippets.

Before

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['US']},
  ...
});

After

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['US'],
  ...

Change types to includedPrimaryTypes

Change instances of types to use the includedPrimaryTypes field, as shown in the following snippets.

Before

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  types: ['restaurant'],
});

After

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['restaurant'],
});

Change gmp-requesterror to gmp-error

Change instances of gmp-requesterror to gmp-error, as shown in the following snippets:

Before

autocompleteElement.addEventListener('gmp-requesterror', (event) => {
  console.log('an error occurred');
});

After

autocompleteElement.addEventListener('gmp-error', (event) => {
  console.log('an error occurred');
});