Migrer vers le nouveau widget de saisie semi-automatique

Ce guide de migration s'adresse aux développeurs qui ont intégré le widget Place Autocomplete (preview) avant la version 3.59.8. Ce guide vous indique les modifications à apporter pour utiliser la dernière version.

Modifications

  • L'événement gmp-placeselect a été renommé gmp-select.
  • L'événement gmp-select renvoie désormais une instance placePrediction au lieu d'une instance place. PlacePrediction.toPlace() renvoie l'objet Place approprié.
  • L'événement gmp-requesterror est désormais gmp-error.

Étapes de migration

Pour migrer votre intégration du widget Place Autocomplete vers la dernière version, procédez comme suit :

  1. Vérifiez que l'API Places (nouveau) est activée pour votre projet dans la console Cloud.
  2. Ajoutez la nouvelle API Places à la liste des restrictions d'API pour la clé API que vous utilisez.
  3. Dans votre environnement de développement, effectuez et testez les modifications suivantes :

Mettre à jour l'écouteur d'événements

Remplacez gmp-placeselect par gmp-select, comme indiqué dans les extraits suivants :

Avant

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

Après

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

Remplacer componentRestrictions par includedRegionCodes

Remplacez les instances de componentRestrictions par le champ includedRegionCodes, comme indiqué dans les extraits suivants.

Avant

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

Après

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

Remplacer types par includedPrimaryTypes

Remplacez les instances de types par le champ includedPrimaryTypes, comme indiqué dans les extraits suivants.

Avant

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

Après

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

Remplacer gmp-requesterror par gmp-error

Remplacez les instances de gmp-requesterror par gmp-error, comme indiqué dans les extraits suivants :

Avant

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

Après

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