Cómo migrar al nuevo widget de Autocomplete

Esta guía de migración es para los desarrolladores que tienen una integración con el widget de Place Autocomplete (versión preliminar) anterior a la versión 3.59.8. En esta guía, se muestran los cambios que debes realizar para usar la versión más reciente.

Cambios

  • Se cambió el nombre del evento gmp-placeselect por gmp-select.
  • El evento gmp-select ahora devuelve una instancia de placePrediction en lugar de una instancia de place. PlacePrediction.toPlace() devuelve el objeto Place adecuado.
  • El evento gmp-requesterror ahora es gmp-error.

Pasos de la migración

Para migrar tu integración del widget de Place Autocomplete a la versión más reciente, haz lo siguiente:

  1. Verifica que la Places API (nueva) esté habilitada para tu proyecto en la consola de Cloud.
  2. Agrega la API de Places (nueva) a la lista de restricciones de APIs de la clave de API que usas.
  3. En tu entorno de desarrollo, realiza y prueba los siguientes cambios:

Actualiza el objeto de escucha de eventos

Cambia gmp-placeselect a gmp-select, como se muestra en los siguientes fragmentos:

Antes

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

Después

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

Cambia componentRestrictions a includedRegionCodes.

Cambia las instancias de componentRestrictions para que usen el campo includedRegionCodes, como se muestra en los siguientes fragmentos.

Antes

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

Después

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

Cambia types a includedPrimaryTypes.

Cambia las instancias de types para usar el campo includedPrimaryTypes, como se muestra en los siguientes fragmentos.

Antes

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

Después

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

Cambia gmp-requesterror a gmp-error.

Cambia las instancias de gmp-requesterror a gmp-error, como se muestra en los siguientes fragmentos:

Antes

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

Después

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