Eseguire la migrazione al nuovo widget di completamento automatico

Questa guida alla migrazione è destinata agli sviluppatori che hanno un'integrazione con il widget Place Autocomplete (anteprima) precedente alla versione 3.59.8. Questa guida mostra le modifiche che devi apportare per utilizzare l'ultima versione.

Modifiche

  • L'evento gmp-placeselect è stato rinominato in gmp-select.
  • L'evento gmp-select ora restituisce un'istanza placePrediction anziché un'istanza place. PlacePrediction.toPlace() restituisce l'oggetto Place corretto.
  • L'evento gmp-requesterror ora è gmp-error.

Passi per la migrazione

Per eseguire la migrazione dell'integrazione del widget Place Autocomplete all'ultima versione, svolgi i seguenti passaggi:

  1. Verifica che l'API Places (nuova) sia abilitata per il tuo progetto nella console Cloud.
  2. Aggiungi API Places (New) all'elenco delle limitazioni API per la chiave API che stai utilizzando.
  3. Nel tuo ambiente di sviluppo, esegui e testa le seguenti modifiche:

Aggiorna listener di eventi

Modifica gmp-placeselect in gmp-select come mostrato negli snippet seguenti:

Prima

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

Dopo

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

Modifica componentRestrictions in includedRegionCodes

Modifica le istanze di componentRestrictions in modo che utilizzino il campo includedRegionCodes, come mostrato negli snippet seguenti.

Prima

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

Dopo

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

Modifica types in includedPrimaryTypes

Modifica le istanze di types in modo che utilizzino il campo includedPrimaryTypes, come mostrato nei seguenti snippet.

Prima

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

Dopo

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

Modifica gmp-requesterror in gmp-error

Modifica le istanze di gmp-requesterror in gmp-error, come mostrato nei seguenti snippet:

Prima

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

Dopo

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