Zum neuen Autocomplete-Widget migrieren

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

Änderungen

  • Der Termin 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.
  • Der Termin gmp-requesterror heißt jetzt gmp-error.

Migrationsschritte

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

  1. Prüfen Sie, ob 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 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 die 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 Code-Snippets gezeigt:

Vorher

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

Nachher

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