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 togmp-select
. - The
gmp-select
event now returns aplacePrediction
instance rather than aplace
instance.PlacePrediction.toPlace()
returns the properPlace
object. - The
gmp-requesterror
event is nowgmp-error
.
Migration steps
To migrate your Place Autocomplete Widget integration to the latest version, do the following:
- Verify that Places API (New) is enabled for your project in the Cloud console.
- Add Places API (New) to the API restrictions list for the API key that you're using.
- 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');
});