Как перейти на новый виджет Autocomplete

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

Изменения

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

Этапы перехода

Чтобы перейти на последнюю версию виджета Place Autocomplete, выполните следующие действия:

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