Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Autocomplete für Adressen und Suchbegriffe

Einführung

Die automatische Vervollständigung ist eine Funktion der Places-Bibliothek in der Google Maps JavaScript API. Sie können die automatische Vervollständigung nutzen, um in Ihren Anwendungen dasselbe Vervollständigungsverhalten bei Suchen zu erhalten wie im Suchfeld von Google Maps. Wenn ein Benutzer beginnt, eine Adresse einzugeben, wird durch die automatische Vervollständigung der Rest ausgefüllt.

Erste Schritte

Bevor Sie die Places-Bibliothek in der Google Maps JavaScript API verwenden, müssen Sie zuerst sicherstellen, dass der Google Places API Web Service in der Google API Console im gleichen Projekt, das Sie für die Google Maps JavaScript API eingerichtet haben, aktiviert ist.

So zeigen Sie die Liste der aktivierten APIs an:

  1. Navigieren Sie zu Google API Console.
  2. Klicken Sie auf die Schaltfläche Select a project, wählen Sie das Projekt aus, das Sie für die Google Maps JavaScript API eingerichtet haben, und klicken Sie auf Open.
  3. Suchen Sie in der Liste der APIs im Dashboard nach Google Places API Web Service.
  4. Wenn die API in der Liste angezeigt wird, sind Sie startbereit. Wenn die API nicht in der Liste enthalten ist, aktivieren Sie sie:
    1. Wählen Sie oben auf der Seite ENABLE API aus, um den Tab Library anzuzeigen. Alternativ können Sie im Menü auf der linken Seite Library auswählen.
    2. Suchen Sie nach Google Places API Web Service und wählen Sie den Eintrag dann in der Ergebnisliste aus.
    3. Wählen Sie ENABLE aus. Nachdem der Vorgang abgeschlossen ist, wird die Google Places API Web Service in der Liste der APIs im Dashboard angezeigt.

Laden der Bibliothek

Der Places-Dienst ist eine eigenständige Bibliothek, die unabhängig vom Maps JavaScript API-Hauptcode ist. Um die in dieser Bibliothek enthaltenen Funktionen nutzen zu können, müssen Sie die Bibliothek zunächst mithilfe des Parameters libraries in die Maps API Bootstrap-URL laden:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Weitere Informationen finden Sie unter Übersicht über Bibliotheken.

Nutzungsbeschränkungen und Richtlinien

Kontingente

Der Google Places API Web Service und die automatische Vervollständigung von Orten haben ein gemeinsames Nutzungskontingent, das in der Dokumentation zu Nutzungsbeschränkungen für Google Places API Web Service beschrieben ist. Diese Nutzungsbeschränkungen gelten auch bei Verwendung der Places Library in the Google Maps JavaScript API. Die Tagesnutzung wird als Summe der kombinierten clientseitigen und serverseitigen Anforderungen berechnet.

Richtlinien

Die Nutzung der Places Library in the Google Maps JavaScript API muss im Einklang mit den für den Google Places API Web Service beschriebenen Richtlinien erfolgen.

Übersicht über Klassen

Die API bietet zwei Arten von Autocomplete-Widgets, die Sie über die Klassen Autocomplete bzw.SearchBox hinzufügen können. Darüber hinaus können Sie die Klasse AutocompleteService verwenden, um Autocomplete-Ergebnisse programmgesteuert abzurufen.

Nachfolgend sind die verfügbaren Klassen zusammengefasst:

  • Mit Autocomplete wird ein Texteingabefeld zu Ihrer Webseite hinzugefügt, das auf die Eingabe von Zeichen überwacht wird. Sobald der Benutzer einen Text eingibt, werden mithilfe von Autocomplete Ortsvorhersagen in Form einer Dropdown-Auswahlliste angezeigt. Wenn der Benutzer einen Ort aus der Liste auswählt, werden Informationen zu diesem Ort an das Objekt „autocomplete“ zurückgegeben, die dann von Ihrer Anwendung abgerufen werden können. Siehe dazu untenstehende Details.
  • Mit SearchBox wird ein Texteingabefeld zu Ihrer Webseite hinzugefügt, das im Wesentlichen Autocomplete entspricht. Es bestehen jedoch folgende Unterschiede:
    • Der Hauptunterschied besteht in dem Ergebnis, das in der Auswahlliste angezeigt wird. Mit SearchBox wird eine erweiterte Liste mit Vorhersagen ausgegeben, die Orte (entsprechend der Definition in Google Places API) plus vorgeschlagene Suchbegriffe enthalten kann. Wenn ein Benutzer beispielsweise „Pizza in New“ eingibt, kann die Auswahlliste den Text „Pizza in New York“ ebenso enthalten wie die Namen verschiedener Pizzerien.
    • Mit SearchBox stehen weniger Optionen zur Einschränkung der Suche zur Verfügung als mit Autocomplete. Mit dem erstgenannten Widget können Sie die Suche in Richtung bestimmter LatLngBounds ausrichten. Das zweitgenannte Widget ermöglicht die Einschränkung der Suche auf ein bestimmtes Land und bestimmte Ortstypen sowie die Festlegung von Grenzen.
    Siehe dazu untenstehende Details.
  • Sie können ein Objekt AutocompleteService erstellen, um Vorhersagen programmgesteuert abzurufen. Rufen Sie getPlacePredictions() auf, um übereinstimmende Orte abzurufen, oder rufen Sie getQueryPredictions() auf, um übereinstimmende Orte plus vorgeschlagene Suchbegriffe abzurufen. Hinweis: Mit AutocompleteService werden keine Steuerelemente der Benutzeroberfläche hinzugefügt. Stattdessen wird mit der obigen Methode ein Array mit Vorhersageobjekten ausgegeben. Jedes Vorhersageobjekt enthält den Text der Vorhersage sowie Referenzinformationen und detaillierte Angaben darüber, inwieweit das Ergebnis mit der Benutzereingabe übereinstimmt. Siehe dazu untenstehende Details.

Die verbleibenden Abschnitte dieser Seite enthalten Anwendungsfälle und Details zur Verwendung der oben genannten Klassen.

Verwendung von Autocomplete

Im nachfolgenden Video wird anhand von Demos und Beispielcode gezeigt, wie Sie Autocomplete verwenden können.

Beispiel: Autocomplete für Adressformulare

Enthält Ihre Anwendung ein Adressformular, z. B. eine Versandadresse für eine Onlinebestellung, eine Kreditkarten-Rechnungsanschrift oder ein Formular zum Bestellen eines Taxis? Autocomplete kann Benutzer bei der Eingabe der Daten unterstützen.

Abbildung 1 zeigt ein Autocomplete-Textfeld sowie die Auswahlliste der Ortsvorhersagen, die bei Eingabe der Suchabfrage durch den Benutzer angezeigt wird:

Ein Autocomplete-Textfeld sowie die Auswahlliste der Ortsvorhersagen, die bei Eingabe der Suchabfrage durch den Benutzer angezeigt wird.
Abbildung 1: Textfeld der automatischen Vervollständigung und Auswahlliste

Wenn der Benutzer eine Adresse aus der Auswahlliste auswählt, kann das Adressformular durch Ihre Anwendung ausgefüllt werden:

Ein ausgefülltes Adressformular.
Abbildung 2: Ausgefülltes Adressformular

Hier sehen Sie ein aktives Adressformular: Beispiel anzeigen (places-autocomplete-addressform.html).

Lesen Sie weiter, um mehr darüber zu erfahren, wie Sie Autocomplete zu Ihrer Webseite hinzufügen können.

Beispiel: Autocomplete für Kartensteuerelemente

Autocomplete ist hilfreich, um Benutzer im Rahmen einer Kartenanwendung zur Eingabe von Informationen aufzufordern; siehe Abbildung 3:

Ein Autocomplete-Textfeld, das eine unvollständige Stadtsuchanfrage zeigt,     und übereinstimmende Orte.
Abbildung 3: Textfeld der automatischen Vervollständigung und Auswahlliste

Hier sehen Sie die aktive automatische Vervollständigung: Beispiel anzeigen (places-autocomplete-hotelsearch.html).

Lesen Sie weiter, um mehr darüber zu erfahren, wie Sie Autocomplete zu Ihrer Webseite hinzufügen können.

Autocomplete für Orte und Adressen hinzufügen

Mit Autocomplete wird ein Texteingabefeld auf Ihrer Webseite erstellt; es werden Vorhersagen zu Orten in einer UI-Auswahlliste angezeigt und Ortsdaten als Ergebnis einer Anforderung getPlace() zurückgegeben. Jeder Eintrag in der Auswahlliste entspricht einem einzelnen Ort (entsprechend der Definition in Google Places API).

Der Konstruktor Autocomplete verwendet zwei Argumente:

  • Ein HTML-Element input vom Typ text. Hierbei handelt es sich um das Eingabefeld, das vom Autocomplete-Dienst überwacht und an das die Ergebnisse der automatischen Vervollständigung angefügt werden.
  • Ein Argument options, dem folgende Eigenschaften zugewiesen sein können:
    • En Array mit types legt einen Typ oder eine Typauflistung fest, wie in den unterstützten Typen nachfolgend aufgeführt. Wurde nichts angegeben, werden alle Typen zurückgegeben. Üblicherweise ist nur ein Typ zulässig. Die einzige Ausnahme ist, dass Sie die Typen geocode und establishment gefahrlos kombinieren können. Dies hat aber denselben Effekt, wie gar keinen Typ anzugeben. Folgende Typen werden unterstützt:
      • Mit geocode wird der Places-Dienst angewiesen, nur Geocodierungsergebnisse anstelle von Einrichtungsergebnissen zurückzugeben.
      • Mit address wird der Places-Dienst angewiesen, nur Geocodierungsergebnisse mit genauen Adressen zurückzugeben.
      • Mit establishment wird der Places-Dienst angewiesen, nur Einrichtungsergebnisse zurückzugeben.
      • Die Typauflistung (regions) weist den Ortsdienst an, nur Ergebnisse zurückzugeben, die folgenden Typen entsprechen:
        • locality
        • sublocality
        • postal_code
        • country
        • administrative_area1
        • administrative_area2
      • Mit der Typauflistung (cities) wird der Places-Dienst angewiesen, nur Ergebnisse zurückzugeben, die den Typen locality oder administrative_area3 entsprechen.
    • bounds ist ein Objekt google.maps.LatLngBounds, mit dem der Bereich angegeben wird, in dem nach Orten gesucht wird. Die Ergebnisse bevorzugen Orte innerhalb dieser Grenzen, sind aber nicht darauf beschränkt.
    • componentRestrictions kann verwendet werden, um die Ergebnisse auf bestimmte Gruppen zu beschränken. Aktuell können Sie mithilfe von componentRestrictions nach Ländern filtern. Das Land muss als Ländercode in Form einer Zeichenfolge aus zwei Zeichen übergeben werden, die mit ISO 3166-1 ALPHA-2 kompatibel ist.
    • Mit placeIdOnly kann das Widget Autocomplete angewiesen werden, nur Orts-IDs abzurufen. Beim Abrufen von getPlace() im Objekt Autocomplete sind für das zur Verfügung gestellte PlaceResult nur die Eigenschaften place id, types und name festgelegt. Sie können die zurückgegebene Orts-ID mit Aufrufen der Places-, Geocoding-, Directions- oder Distance Matrix-Dienste verwenden.

Tendenzen und Suchbereichsgrenzen für Autocomplete festlegen

Durch Tendenzen können Sie die Autocomplete-Ergebnisse zugunsten eines bestimmten Ortes oder Bereichs wie folgt bevorzugen:

  • Legen Sie bei der Erstellung des Objekts Autocomplete Grenzen fest.
  • Ändern Sie die Grenzen eines bestehenden Objekts Autocomplete.
  • Setzen Sie die Grenzen am Viewport der Karte.
  • Beschränken Sie die Suche auf ein bestimmtes Land.

Einzelheiten dazu werden in den folgenden Abschnitten ausführlich erläutert.

Grenzen bei der Erstellung des Objekts „Autocomplete“ festlegen

Im nachfolgenden Beispiel werden die Optionen bounds und types verwendet, um Unternehmen vom Typ „establishment“ anzufordern, wobei Unternehmen in einem bestimmten geografischen Bereich bevorzugt werden.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

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

Grenzen eines bestehenden Objekts „Autocomplete“ ändern

Rufen Sie setBounds() auf, um die Grenzen eines bestehenden Objekts Autocomplete zu ändern.

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Beispiel anzeigen (places-autocomplete-addressform.html).

Grenzen auf den Viewport der Karte festlegen

Verwenden Sie bindTo(), um die Grenzen zugunsten des Viewports der Karte zu beeinflussen, auch während dieser Viewport sich verändert.

autocomplete.bindTo('bounds', map);

Beispiel anzeigen (places-autocomplete.html).

Suche auf ein bestimmtes Land beschränken

Verwenden Sie die Option componentRestrictions, um die Autocomplete-Suche auf ein bestimmtes Land zu beschränken. Mit dem folgenden Code werden die Ergebnisse auf Städte in Frankreich beschränkt.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

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

Im nachfolgenden Beispiel hat der Benutzer die Möglichkeit, ein Land auszuwählen, woraufhin die Autocomplete-Ergebnisse auf dieses Land beschränkt werden.

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

Beispiel anzeigen (places-autocomplete-hotelsearch.html).

Platzhaltertexte für Autocomplete anpassen

Standardmäßig enthält das durch den Autocomplete-Dienst erstellte Textfeld einen Standardtext für Platzhalter. Um diesen Text zu bearbeiten, setzen Sie das Attribut placeholder auf das Element input:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

Hinweis: Der Standardtext für Platzhalter wird automatisch lokalisiert. Wenn Sie einen eigenen Platzhalterwert angeben, müssen Sie die Lokalisierung dieses Wertes in Ihrer Anwendung vornehmen. Informationen darüber, wie in Google Maps JavaScript API die zu verwendende Sprache ausgewählt wird, finden Sie in der Dokumentation zur Lokalisierung.

Ortinformationen aus Autocomplete abrufen

Wenn ein Benutzer einen Ort aus den Vorhersagen auswählt, die an das Autocomplete-Textfeld angefügt sind, wird durch den Dienst ein Ereignis place_changed ausgelöst. Sie können getPlace() im Objekt Autocomplete aufrufen, um ein Objekt PlaceResult abzurufen.

Standardmäßig wird durch Autocomplete die vollständige Adresse als einzelne Textzeile wiedergegeben. Für Adressformulare ist jedoch es sinnvoll, die Adresse in einem strukturierten Format wiederzugeben. Sie können Autocomplete.getPlace() verwenden, um sämtliche Details jeder Autocomplete-Vorhersage abzurufen, einschließlich der strukturierten Adresse.

Wenn Sie die Option placeIdOnly verwenden, erhält das Objekt Autocomplete keine Ortsdetails, da für das Objekt PlaceResult nur die Eigenschaften place_id, types und name festgelegt sind.

Um Ortsdetails zu erhalten, rufen Sie ein Objekt vom Typ PlaceResult ab, indem Sie getPlace() für das Objekt Autocomplete aufrufen, wenn Sie das Ereignis place_changed erhalten. Anschließend können Sie Geocoding verwenden, um die Standortkoordinaten zu erhalten, oder den Places-Dienst, um weitere Informationen zum ausgewählten Ort zu erhalten.

Weitere Informationen zum Objekt PlaceResult finden Sie in der Dokumentation zu Ortsdatenergebnissen.

Im nachfolgenden Beispiel wird Autocomplete zum Ausfüllen eines Adressformulars verwendet.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

Beispiel anzeigen (places-autocomplete-addressform.html).

Mit SearchBox können Benutzer eine textbasierte geografische Suche durchführen, z. B. „Pizza in New York“ oder „Schuhgeschäfte in der Nähe des Jungfernstiegs“. Sie können SearchBox zu einem Textfeld hinzufügen. Wenn dann Text in dieses Feld eingegeben wird, werden vom Dienst Vorhersagen in Form einer Dropdown-Auswahlliste zurückgegeben.

Mit SearchBox wird eine erweiterte Liste mit Vorhersagen ausgegeben, die Orte (entsprechend der Definition in Google Places API) plus vorgeschlagene Suchbegriffe enthalten kann. Wenn ein Benutzer beispielsweise „Pizza in New“ eingibt, kann die Auswahlliste den Text „Pizza in New York“ ebenso enthalten wie die Namen verschiedener Pizzerien. Wenn ein Benutzer einen Ort aus der Liste auswählt, werden Informationen zu diesem Ort an das Objekt „SearchBox“ zurückgegeben, die dann von Ihrer Anwendung abgerufen werden können.

Der Konstruktor SearchBox verwendet zwei Argumente:

  • Ein HTML-Element input vom Typ text. Hierbei handelt es sich um das Eingabefeld, das mit dem Dienst SearchBox überwacht und um die SearchBox-Ergebnisse ergänzt wird.
  • Ein Argument options, das die Eigenschaft bounds enthalten kann: bounds ist ein Objekt google.maps.LatLngBounds, mit dem der Bereich angegeben wird, in dem nach Orten gesucht wird. Die Ergebnisse bevorzugen Orte innerhalb dieser Grenzen, sind aber nicht darauf beschränkt.

Im nachfolgenden Code wird der Parameter „bounds“ verwendet, um Ergebnisse innerhalb eines bestimmten geografischen Bereichs, der durch Längen- und Breitenkoordinaten angegeben ist, zu bevorzugen.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Suchbereich für SearchBox ändern

Um den Suchbereich für ein vorhandenes Objekt SearchBox zu ändern, rufen Sie setBounds() im Objekt SearchBox auf, und übergeben Sie das entsprechende Objekt LatLngBounds.

Beispiel anzeigen (places-searchbox.html).

SearchBox-Informationen abrufen

Wenn ein Benutzer ein Element aus den an das Suchfeld angefügten Vorhersagen auswählt, wird durch den Dienst ein Ereignis places_changed ausgelöst. Sie können getPlace() im Objekt SearchBox aufrufen, um einen Array mit mehreren Vorhersagen abzurufen, von denen jede ein Objekt PlaceResult ist.

Weitere Informationen zum Objekt PlaceResult finden Sie in der Dokumentation zu Ortsdatenergebnissen.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Beispiel anzeigen (places-searchbox.html).

Autocomplete- und SearchBox-Widgets formatieren

Standardmäßig sind die mit Autocomplete und SearchBox bereitgestellten Benutzeroberflächenelemente für die Einbindung in eine Google-Karte formatiert. Sie können die Formatierung bei Bedarf an Ihre Website anpassen. Folgende CSS-Klassen sind verfügbar: Alle nachfolgend aufgeführten Klassen gelten für die Wigets Autocomplete und SearchBox.

Eine grafische Darstellung der CSS-Klassen für die Autocomplete- und       SearchBox-Widgets
CSS-Klassen für die Autocomplete- und SearchBox-Widgets
CSS-Klasse Beschreibung
pac-container Das visuelle Element, das die Liste der Vorhersagen enthält, die vom Place Autocomplete-Dienst zurückgegeben wurden. Diese Liste wird als Dropdown-Liste unter dem Widget Autocomplete bzw. SearchBox angezeigt.
pac-icon Das links von jedem Element in der Liste der Vorhersagen angezeigte Symbol.
pac-item Ein Element in der vom Widget Autocomplete bzw. SearchBox ausgegebenen Liste der Vorhersagen.
pac-item:hover Das Element, das angezeigt wird, wenn der Benutzer mit dem Mauszeiger darauf zeigt.
pac-item-selected Das Element, das angezeigt wird, wenn der Benutzer es über die Tastatur auswählt. Hinweis: Ausgewählte Elemente gehören zu dieser Klasse und zur Klasse pac-item.
pac-item-query Ein Bereich innerhalb eines pac-item, der den Hauptteil der Vorhersage ausmacht. Bei geografischen Orten enthält dieser Bereich einen Ortsnamen, wie „Sydney“, oder einen Straßennamen mit Hausnummer, z. B. „Hauptstraße 10“. Bei textbasierten Suchabfragen, wie „Pizza in New York“, enthält der Bereich den vollständigen Text der Abfrage. pac-item-query wird standardmäßig schwarz dargestellt. Wenn pac-item zusätzlichen Text enthält, befindet dieser sich außerhalb von pac-item-query und erbt die Formatierung von pac-item. Standardmäßig wird das Element grau dargestellt. Der zusätzliche Text ist in der Regel eine Adresse.
pac-matched Der Teil der zurückgegebenen Vorhersage, der mit der Eingabe des Benutzers übereinstimmt. Standardmäßig wird dieser übereinstimmende Text durch Fettformatierung hervorgehoben. Beachten Sie, dass Textübereinstimmungen an jeder Position in pac-item möglich sind. Sie müssen nicht unbedingt Teil von pac-item-query sein, sie können beispielsweise auch teilweise in pac-item-query und teilweise im übrigen Text von pac-item zu finden sein.

Vorhersagen aus dem Autocomplete-Dienst abrufen

Um Vorhersagen programmgesteuert abzurufen, verwenden Sie die Klasse AutocompleteService. Mit AutocompleteService werden keine Steuerelemente der Benutzeroberfläche hinzugefügt. Stattdessen wird ein Array mit Vorhersageobjekten zurückgegeben, von denen jedes Objekt den Text der Vorhersage sowie Referenzinformationen und Details bezüglich der Übereinstimmung des Ergebnisses mit der Benutzereingabe enthält. Dies ist hilfreich, wenn Sie die Benutzeroberfläche besser steuern können möchten, als dies mit den oben beschriebenen Widgets Autocomplete und SearchBox möglich ist.

AutocompleteService umfasst folgende Methoden:

  • getPlacePredictions() gibt Ortsvorhersagen zurück. Hinweis: Abhängig von der jeweiligen Definition in der Places API kann ein „Ort“ eine Einrichtung, ein geografischer Ort oder eine bekannte Sehenswürdigkeit sein.
  • Mit getQueryPredictions() wird eine erweiterte Liste mit Vorhersagen ausgegeben, die Orte (wie in der Places API definiert) plus vorgeschlagene Suchbegriffe enthalten kann. Wenn ein Benutzer beispielsweise „Pizza in New“ eingibt, kann die Auswahlliste den Text „Pizza in New York“ ebenso enthalten wie die Namen verschiedener Pizzerien.

Beide oben genannten Methoden geben einen Array mit fünf Vorhersageobjekten in der folgenden Form zurück:

  • description bezeichnet die übereinstimmende Vorhersage.
  • id enthält eine eindeutige ID zur Bezeichnung dieses Orts. Die ID kann nicht zum Anfordern von Informationen zu diesem Ort verwendet werden, aber sie kann zum Konsolidieren von Daten zu diesem Ort und zur Überprüfung der Identität eines Orts aus mehreren Suchvorgängen dienen. Da sich IDs gelegentlich ändern können, wird empfohlen, die gespeicherte ID für einen Ort mit der ID, die später in Anforderungen für Ortsdaten für denselben Ort zurückgegeben wird, zu vergleichen und ggf. zu aktualisieren. Hinweis: id ist gegenüber place_id veraltet; siehe hierzu den Hinweis zur Veralterung auf dieser Seite.
  • matched_substrings enthält Teilzeichenfolgen in der Beschreibung, die Elementen in der Benutzereingabe entsprechen. Dies ist hilfreich, um diese Teilzeichenfolgen in Ihrer Anwendung hervorzuheben. In vielen Fällen wird die Abfrage als Teilzeichenfolge des Beschreibungsfelds dargestellt.
    • length bezeichnet die Länge der Teilzeichenfolge.
    • offset bezeichnet das Zeichenoffset gemessen vom Anfang der Beschreibungszeichenfolge, an der die übereinstimmende Teilzeichenfolge angezeigt wird.
  • place_id ist eine ID in Textform, die einen Ort eindeutig bezeichnet. Um Informationen zu einem Ort abzurufen, geben Sie diese ID in das Feld placeId einer Anforderung von Ortsdaten ein. Weitere Informationen finden Sie unter Erstellen von Verweisen auf Orte mit einer Orts-ID.
  • reference enthält ein Token, das Sie zukünftig zum Abfragen des Ortsdatendiensts verwenden können. Dieses Token kann von der in der Abfrage des Ortsdatendiensts verwendeten Referenz abweichen. Gespeicherte Referenzen für Orte sollten regelmäßig aktualisiert werden. Auch wenn dieses Token den Ort eindeutig identifiziert, gilt das umgekehrt nicht: Ein Ort kann viele gültige Referenztokens haben. Hinweis: reference ist gegenüber place_id veraltet; siehe hierzu den Hinweis zur Veralterung auf dieser Seite.
  • terms ist ein Array, der Elemente der Abfrage enthält. Bei einem Ort bildet jedes Element in der Regel einen Teil der Adresse.
    • offset bezeichnet das Zeichenoffset gemessen vom Anfang der Beschreibungszeichenfolge, an der die übereinstimmende Teilzeichenfolge angezeigt wird.
    • value ist der übereinstimmende Begriff.

Im nachfolgenden Beispiel wird eine Vorhersageanforderung einer Abfrage für den Text „pizza near“ ausgeführt, und die Ergebnisse werden in einer Liste angezeigt.

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

Beispiel anzeigen (places-queryprediction.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API