Zum neuen Autocomplete-Widget migrieren

Dieser Migrationsleitfaden richtet sich an Entwickler, die vor Version 3.59.8 eine Integration mit dem Place Autocomplete-Widget (Vorabversion) haben. In diesem Leitfaden erfahren Sie, welche Änderungen Sie vornehmen müssen, um die aktuelle Version zu verwenden.

Änderungen

  • Das Ereignis gmp-placeselect wurde in gmp-select umbenannt.
  • Das gmp-select-Ereignis gibt jetzt eine placePrediction-Instanz anstelle einer place-Instanz zurück. PlacePrediction.toPlace() gibt das richtige Place-Objekt zurück.
  • Das Ereignis gmp-requesterror ist jetzt gmp-error.

Migrationsschritte

So migrieren Sie Ihre Place Autocomplete-Widget-Integration zur neuesten Version:

  1. Prüfen Sie, ob die Places API (New) für Ihr Projekt in der Cloud Console aktiviert ist.
  2. Fügen Sie der Liste der API-Einschränkungen für den verwendeten API-Schlüssel Places API (New) hinzu.
  3. Nehmen Sie in Ihrer Entwicklungsumgebung die folgenden Änderungen vor und testen Sie sie:

Event-Listener aktualisieren

Ändern Sie gmp-placeselect zu gmp-select, wie in den folgenden Snippets gezeigt:

Vorher

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

Nach

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

Ändern Sie componentRestrictions zu includedRegionCodes.

Ändern Sie alle Instanzen von componentRestrictions so, dass das Feld includedRegionCodes verwendet wird, wie in den folgenden Snippets gezeigt.

Vorher

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

Nach

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

Ändern Sie types zu includedPrimaryTypes.

Ändern Sie Instanzen von types so, dass das Feld includedPrimaryTypes verwendet wird, wie in den folgenden Snippets gezeigt.

Vorher

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

Nach

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

Ändern Sie gmp-requesterror zu gmp-error.

Ändern Sie alle Instanzen von gmp-requesterror zu gmp-error, wie in den folgenden Snippets gezeigt:

Vorher

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

Nachher

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