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

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

Изменения

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

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

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

1. Убедитесь, что Places API (новый) включен для вашего проекта в консоли 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');
});