Переходите на новый виджет автозаполнения

Данное руководство по миграции предназначено для разработчиков, которые использовали интеграцию с виджетом автозаполнения мест (предварительная версия) до версии 3.59.8 . В этом руководстве показаны изменения, которые необходимо внести для использования последней версии.

Изменения

  • Событие gmp-placeselect переименовано в gmp-select .
  • Теперь событие gmp-select возвращает экземпляр placePrediction , а не экземпляр place . PlacePrediction.toPlace() возвращает правильный объект Place .
  • Событие gmp-requesterror теперь называется gmp-error .

Этапы миграции

Чтобы перенести интеграцию виджета автозаполнения мест на последнюю версию, выполните следующие действия:

  1. Убедитесь, что API Places (новый) включен для вашего проекта в консоли Cloud.
  2. Добавьте Places API (новый) в список ограничений API для используемого вами ключа API.
  3. В вашей среде разработки выполните и протестируйте следующие изменения:

Обновить обработчик событий

Замените gmp-placeselect на gmp-select , как показано в следующих фрагментах кода:

До 

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

После 

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

Измените componentRestrictions на includedRegionCodes

Измените параметры экземпляров componentRestrictions , чтобы они использовали поле includedRegionCodes , как показано в следующих фрагментах кода.

До 

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

После 

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

Измените types на includedPrimaryTypes

Измените экземпляры types , чтобы они использовали поле includedPrimaryTypes , как показано в следующих фрагментах кода.

До 

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

После 

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

Замените gmp-requesterror на gmp-error

Замените экземпляры gmp-requesterror на gmp-error , как показано в следующих фрагментах кода:

До 

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

После 

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