Migrar para o novo widget de preenchimento automático

Este guia de migração é destinado a desenvolvedores que têm uma integração com o widget Place Autocomplete (pré-lançamento) antes da versão 3.59.8. Este guia mostra as mudanças que você precisa fazer para usar a versão mais recente.

Mudanças

  • O evento gmp-placeselect foi renomeado como gmp-select.
  • O evento gmp-select agora retorna uma instância placePrediction em vez de uma instância place. PlacePrediction.toPlace() retorna o objeto Place adequado.
  • O evento gmp-requesterror agora é gmp-error.

Etapas da migração

Para migrar a integração do widget do Place Autocomplete para a versão mais recente, faça o seguinte:

  1. Verifique se a API Places (nova) está ativada para seu projeto no console do Cloud.
  2. Adicione a API Places (nova) à lista de restrições da chave de API que você está usando.
  3. No ambiente de desenvolvimento, faça e teste as seguintes mudanças:

Atualizar listener de eventos

Mude gmp-placeselect para gmp-select, conforme mostrado nos snippets a seguir:

Antes

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

Depois

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

Trocar componentRestrictions para includedRegionCodes

Mude as instâncias de componentRestrictions para usar o campo includedRegionCodes, conforme mostrado nos snippets a seguir.

Antes

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

Depois

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

Trocar types para includedPrimaryTypes

Mude as instâncias de types para usar o campo includedPrimaryTypes, conforme mostrado nos snippets a seguir.

Antes

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

Depois

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

Trocar gmp-requesterror para gmp-error

Mude as instâncias de gmp-requesterror para gmp-error, conforme mostrado nos snippets a seguir:

Antes

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

Depois

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