Zum neuen Place Autocomplete migrieren

Entwickler im Europäischen Wirtschaftsraum (EWR)

„Place Autocomplete“ ist eine Funktion der Places Library in der Maps JavaScript API. Mit der automatischen Vervollständigung erhalten Sie in Ihren Anwendungen dasselbe Vervollständigungsverhalten bei Suchen wie im Suchfeld von Google Maps.

Auf dieser Seite werden die Unterschiede zwischen den alten und neuen Place Autocomplete-Funktionen erläutert. In beiden Versionen gibt es zwei allgemeine Möglichkeiten, die automatische Vervollständigung zu integrieren:

Programmatische Schnittstelle für die automatische Vervollständigung

In der folgenden Tabelle sind einige der wichtigsten Unterschiede bei der programmatischen Verwendung von „Place Autocomplete“ zwischen dem „Place Autocomplete“-Dienst (Legacy) und der Autocomplete Data API (neu) aufgeführt:

PlacesService (Legacy) Place (Neu)
Referenz zum „Place Autocomplete“-Dienst Referenz für Autocomplete-Daten (neu)
AutocompletionRequest AutocompleteRequest
AutocompleteService.getPlacePredictions AutocompleteSuggestion.fetchAutocompleteSuggestions
AutocompletePrediction PlacePrediction
Für Methoden ist die Verwendung eines Callbacks erforderlich, um das Ergebnisobjekt und die PlacesServiceStatus-Antwort zu verarbeiten. Verwendet Promises und funktioniert asynchron.
Für Methoden ist eine PlacesServiceStatus-Prüfung erforderlich. Keine Statusprüfung erforderlich, es kann die Standardfehlerbehandlung verwendet werden. Weitere Informationen
Die Datenfelder werden als Optionen festgelegt, wenn die Autocomplete-Instanz erstellt wird. Die Platzdatenfelder werden später beim Aufruf von fetchFields() festgelegt.
Abfragevorhersagen werden unterstützt (nur SearchBox). Abfragevorhersagen sind in der Autocomplete-Klasse nicht verfügbar.
Beschränkt auf eine feste Gruppe von Ortsarten und Ortsdatenfeldern. Zugriff auf eine erweiterte Auswahl von Ortsarten und Ortsdatenfeldern.

Folgende Elemente werden sowohl von älteren als auch von neuen Autocomplete-APIs verwendet:

Codevergleich (programmatisch)

Dieser Abschnitt vergleicht Codebeispiele für die Autovervollständigung, um die Unterschiede zwischen dem Places Service und der Place-Klasse für programmatische Schnittstellen zu verdeutlichen.

Automatische Vervollständigungen abrufen (Legacy)

Mit dem alten Places Service können Sie programmatisch Vorschläge für die automatische Vervollständigung abrufen und so mehr Kontrolle über die Benutzeroberfläche erhalten als mit der Klasse Autocomplete. Im folgenden Beispiel wird eine einzelne Anfrage für "par" gestellt, wobei AutocompletionRequest aus dem Eingabewert und einer Reihe von Grenzen zur Gewichtung der Vorhersage besteht. Das Beispiel gibt eine Liste von AutocompletePrediction Instanzen zurück und zeigt die Beschreibung für jede einzelne an. Die Beispielfunktion erstellt außerdem ein Sitzungstoken und wendet es auf die Anfrage an.

function init() {
  const placeInfo = document.getElementById("prediction");
  const service = new google.maps.places.AutocompleteService();
  const placesService = new google.maps.places.PlacesService(placeInfo);
  var sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    bounds: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  }

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const displaySuggestions = function (predictions, status) {
    // Check the status of the Places Service.
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });

    const placeRequest = {
      placeId: predictions[0].place_id,
      fields: ["name", "formatted_address"],
    };

    placesService.getDetails(placeRequest, (place, status) => {
      if (status == google.maps.places.PlacesServiceStatus.OK && place) {
        placeInfo.textContent = `
          First predicted place: ${place.name} at ${place.formatted_address}`
      }
    });

  };

  // Show the results of the query.
  service.getPlacePredictions(request, displaySuggestions);
}

Autovervollständigungsvorschläge abrufen (neu)

Mit der neuen Place-Klasse können Sie außerdem programmatisch Autocomplete-Vorhersagen abrufen und so die Benutzeroberfläche besser steuern als mit der PlaceAutocompleteElement-Klasse. Im folgenden Beispiel wird eine einzelne Anfrage für "par" gestellt, wobei AutocompleteRequest aus dem Eingabewert und einer Reihe von Grenzen zur Gewichtung der Vorhersage besteht. Das Beispiel gibt eine Liste von placePrediction-Instanzen zurück und zeigt die Beschreibung für jede einzelne an. Die Beispielfunktion erstellt außerdem ein Sitzungstoken und wendet es auf die Anfrage an.

async function init() {
  let sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    locationBias: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  };

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const { suggestions } =
    await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

  const resultsElement = document.getElementById("results");

  for (let suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    const listItem = document.createElement("li");

    listItem.appendChild(
      document.createTextNode(placePrediction.text.text),
    );

    resultsElement.appendChild(listItem);
  }

  // Show the first predicted place.
  let place = suggestions[0].placePrediction.toPlace();

  await place.fetchFields({
    fields: ["displayName", "formattedAddress"],
  });

  const placeInfo = document.getElementById("prediction");

  placeInfo.textContent = `
    First predicted place: ${place.displayName} at ${place.formattedAddress}`
}

Widget für die automatische Vervollständigung von Orten

In der folgenden Tabelle sind einige der wichtigsten Unterschiede bei der Verwendung von Autocomplete-Widgets zwischen dem Places-Dienst (Legacy) und der Place-Klasse (neu) aufgeführt:

Places Service (Legacy) Place (Neu)
Autocomplete-Klasse für Ortsvorschläge. PlaceAutocompleteElement-Klasse für Ortsvorschläge.
SearchBox-Klasse
für Abfragevorhersagen. 		Abfragevorhersagen sind in der Autocomplete-Klasse nicht verfügbar.
Nur der Standardplatzhaltertext für die Eingabe wird lokalisiert. Der Texteingabeplatzhalter, das Logo der Liste mit Vorschlägen und die Ortsvorschläge unterstützen die regionale Lokalisierung.
Das Widget verwendet setBounds() oder autocomplete.bindTo(), um die Suche auf die angegebenen Grenzen zu beschränken (vorzuspannen), und strictBounds, um die Ergebnisse auf die angegebenen Grenzen zu beschränken. Das Widget verwendet das Attribut locationBias, um die Ergebnisse auf die angegebenen Grenzen zu beschränken, und das Attribut locationRestriction, um die Suche auf die angegebenen Grenzen zu beschränken.
Widgets können nur über ein standardmäßiges HTML-Eingabeelement eingebunden werden. Das Widget kann über ein standardmäßiges HTML-Eingabeelement oder ein gmp-place-autocomplete-Element eingebunden werden.
Bei der Verwendung des Widgets können Nutzer Dinge anfordern, die möglicherweise nicht gültig sind (z. B. „bisneyland“). Dieser Fall muss explizit behandelt werden. Das Widget gibt nur Ergebnisse für die bereitgestellten Vorschläge zurück und kann keine Anfragen für beliebige Werte stellen. Daher müssen Sie keine potenziell ungültigen Anfragen verarbeiten.
Gibt eine Legacy-Instanz von PlaceResult zurück. Gibt eine Place-Instanz zurück.
Felder für „Place“-Daten werden als Optionen für das Autocomplete-Objekt festgelegt. Die Datenfelder für Orte werden festgelegt, wenn der Nutzer eine Auswahl trifft und fetchFields() aufgerufen wird.
Beschränkt auf eine feste Gruppe von Ortsarten und Ortsdatenfeldern. Zugriff auf eine erweiterte Auswahl von Ortsarten und Ortsdatenfeldern.

Codevergleich (Widgets)

In diesem Abschnitt wird Code für die automatische Vervollständigung verglichen, um die Unterschiede zwischen dem alten Place Autocomplete-Widget und dem neuen Place Autocomplete-Element zu veranschaulichen.

Widget für Place Autocomplete (Legacy)

Der Places-Dienst bietet zwei Arten von Widgets zur automatischen Vervollständigung, die Sie über die Klassen Autocomplete und SearchBox hinzufügen können. Jede Art von Widget kann einer Karte als Kartensteuerelement hinzugefügt oder direkt in eine Webseite eingebettet werden. Das folgende Codebeispiel zeigt, wie ein Autocomplete-Widget als Kartensteuerung eingebettet wird.

  • Der Autocomplete-Widget-Konstruktor hat zwei Argumente:
    • Ein HTML-input-Element des Typs text. Das ist das Eingabefeld, das vom Dienst zur automatischen Vervollständigung überwacht wird und an das die Ergebnisse angehängt werden.
    • Ein optionales AutocompleteOptions-Argument, mit dem Sie weitere Optionen zum Einschränken der Abfrage angeben können.
  • Um Grenzen festzulegen, kann die Autocomplete-Instanz explizit an die Karte gebunden werden, indem autocomplete.bindTo() aufgerufen wird.
  • Geben Sie Ortsdatenfelder in den Optionen für die automatische Vervollständigung an.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapTypeControl: false,
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  const options = {
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
  };

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  const autocomplete = new google.maps.places.Autocomplete(input, options);

  // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.
  autocomplete.bindTo("bounds", map);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });

  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);

    const place = autocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
  });
}

Widget für Place Autocomplete (neu)

Die Place-Klasse bietet die PlaceAutocompleteElement, eine HTMLElement-Unterklasse, die eine UI-Komponente bereitstellt, die einer Karte als Kartensteuerelement hinzugefügt oder direkt in eine Webseite eingebettet werden kann. Im folgenden Codebeispiel wird gezeigt, wie ein PlaceAutocompleteElement-Widget als Kartensteuerelement eingebettet wird.

Das Place Autocomplete-Widget wurde in den folgenden Bereichen optimiert:

  • Die Benutzeroberfläche des Autocomplete-Widgets unterstützt die regionale Lokalisierung (einschließlich RTL-Sprachen) für den Texteingabeplatzhalter, das Logo der Liste mit Vorschlägen und die Ortsvorschläge.
  • Die Bedienungshilfen wurden weiter verbessert, einschließlich Unterstützung für Screenreader und Tastaturinteraktionen.
  • Das Autocomplete-Widget gibt die neue Place-Klasse zurück, um die Verarbeitung des zurückgegebenen Objekts zu vereinfachen.
  • Bessere Unterstützung für Mobilgeräte und kleine Bildschirme.
  • Bessere Leistung und grafische Darstellung.

Die wichtigsten Unterschiede bei der Implementierung sind:

  • Das PlaceAutocompleteElement stellt ein eigenes Eingabefeld bereit und wird direkt über HTML oder JavaScript in die Seite eingefügt (im Gegensatz zu einem vorhandenen Eingabeelement).
  • Abfragevorhersagen sind in der Klasse Autocomplete nicht verfügbar.
  • PlaceAutocompleteElement wird mit PlaceAutocompleteElementOptions erstellt.
    • Felder für „Place“-Daten werden bei der Auswahl angegeben (wenn fetchFields() aufgerufen wird).
  • Legen Sie die Grenzen mit der Option locationBounds oder locationRestriction fest.
let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  const placeAutocomplete =
    new google.maps.places.PlaceAutocompleteElement({
      locationRestriction: map.getBounds(),
    });

  placeAutocomplete.id = "place-autocomplete-input";
  const card = document.getElementById("place-autocomplete-card");

  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  // Create the marker and infowindow.
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});

  // Add the gmp-select listener, and display the results on the map.
  placeAutocomplete.addEventListener("gmp-select", async ( place ) => {
    const place = event.placePrediction.toPlace();
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      '</span><br />' +
      '<span id="place-address">' +
      place.formattedAddress +
      '</span>' +
      '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}