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 la versione più recente.

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 alla versione più recente:

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

Aggiorna il listener di eventi

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

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 nei seguenti snippet.

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');
});