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 neueste Version zu verwenden.

Änderungen

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

Migrationsschritte

So migrieren Sie Ihre Place Autocomplete-Widget-Integration zur neuesten Version: Gehen Sie wie folgt vor:

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

Event-Listener aktualisieren

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

Vorher

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

Nachher

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

componentRestrictions in includedRegionCodes ändern

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

Vorher

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

Nachher

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

types in includedPrimaryTypes ändern

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

Nachher

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

gmp-requesterror in gmp-error ändern

Ändern Sie Instanzen von gmp-requesterror in 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');
});