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'
);
});