Place Autocomplete

Plattform auswählen: Android iOS JavaScript Webdienst

Einführung

Die automatische Vervollständigung 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. Der Dienst für die automatische Vervollständigung findet Übereinstimmungen mit vollständigen Wörtern und Teilstrings, sodass sich Ortsnamen, Adressen und Plus Codes zuordnen lassen. Anwendungen können daher, während der Nutzer tippt, Abfragen senden, um spontan Ortsvorschläge auszugeben.

Erste Schritte

Bevor Sie die Places Library in der Maps JavaScript API verwenden können, müssen Sie die Places API in der Google Cloud Console aktivieren, und zwar in dem Projekt, das Sie für die Maps JavaScript API eingerichtet haben.

So öffnen Sie die Liste der aktivierten APIs:

  1. Rufen Sie die Google Cloud Console auf.
  2. Klicken Sie auf die Schaltfläche Projekt auswählen, wählen Sie das Projekt aus, das Sie für die Maps JavaScript API eingerichtet haben, und klicken Sie dann auf Öffnen.
  3. Suchen Sie im Dashboard in der Liste der APIs nach Places API.
  4. Wenn die API in der Liste angezeigt wird, müssen Sie nichts weiter tun. Ist die API nicht aufgeführt, aktivieren Sie sie:
    1. Wählen Sie oben auf der Seite API AKTIVIEREN aus, um den Tab Bibliothek aufzurufen. Sie haben auch die Möglichkeit, im Menü auf der linken Seite Bibliothek auszuwählen.
    2. Suchen Sie nach der Places API und wählen Sie sie dann in der Ergebnisliste aus.
    3. Klicken Sie auf AKTIVIEREN. Die Places API wird dann in der Liste der APIs auf dem Dashboard angezeigt.

Bibliothek laden

Der Places-Dienst ist eine eigenständige Bibliothek, die unabhängig vom Code der Maps JavaScript API ist. Damit Sie die Funktionen der Bibliothek nutzen können, müssen Sie sie zuerst mithilfe des libraries-Parameters in der Bootstrap-URL der Maps API laden:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

Weitere Informationen finden Sie in der Übersicht der Bibliotheken.

Übersicht über die Klassen

Die API bietet zwei Arten von Widgets zur automatischen Vervollständigung, die Sie über die Klassen Autocomplete und SearchBox hinzufügen können. Über die Klasse AutocompleteService können Sie außerdem Ergebnisse der automatischen Vervollständigung programmatisch abrufen. Weitere Informationen hierzu finden Sie in der Maps JavaScript API-Referenz unter AutocompleteService-Klasse.

Im Folgenden finden Sie eine Zusammenfassung der verfügbaren Klassen:

  • Autocomplete fügt ein Texteingabefeld auf der Webseite ein und überwacht es auf die Eingabe von Zeichen. Sobald der Nutzer Text eingibt, werden über die automatische Vervollständigung Orte in einer Drop-down-Auswahlliste vorgeschlagen. Wenn der Nutzer einen Ort aus der Liste auswählt, werden Informationen zu diesem Ort an das Objekt zur automatischen Vervollständigung zurückgegeben, die dann von Ihrer Anwendung abgerufen werden können. Weitere Informationen
    Ein Textfeld für die automatische Vervollständigung sowie die Auswahlliste der vorgeschlagenen Orte, die bei Eingabe der Suchanfrage durch den Nutzer angezeigt wird
    Abbildung 1: Textfeld mit automatischer Vervollständigung und Auswahlliste
    Ein ausgefülltes Adressformular
    Abbildung 2: Ausgefülltes Adressformular
  • SearchBox bettet ein Texteingabefeld in die Webseite ein, ähnlich wie bei Autocomplete. Dabei gibt es folgende Unterschiede:
    • Der Hauptunterschied besteht in den Ergebnissen, die in der Auswahlliste angezeigt werden. SearchBox liefert eine erweiterte Liste von Vorschlägen, die Orte (wie in der Places API definiert) und vorgeschlagene Suchbegriffe umfassen kann. Gibt der Nutzer beispielsweise „pizza in new“ ein, kann die Auswahlliste den Eintrag „pizza in New York, NY“ sowie die Namen verschiedener Pizzerien beinhalten.
    • SearchBox bietet weniger Optionen zum Einschränken der Suche als Autocomplete. Mit dem erstgenannten Widget können Sie die Suche zugunsten eines bestimmten LatLngBounds-Objekts gewichten. Das zweitgenannte Widget ermöglicht die Einschränkung der Suche auf ein bestimmtes Land und bestimmte Ortstypen sowie die Festlegung von Grenzen. Weitere Informationen finden Sie unten.
    Ein ausgefülltes Adressformular
    Abbildung 3: Suchfeld mit Suchbegriffen und vorgeschlagenen Orten
    Weitere Informationen finden Sie unten.
  • Sie können ein AutocompleteService-Objekt erstellen, um vervollständigte Suchanfragen programmatisch abzurufen. Rufen Sie getPlacePredictions() auf, um übereinstimmende Orte abzurufen, oder getQueryPredictions(), um übereinstimmende Orte und vorgeschlagene Suchbegriffe zu erhalten. Hinweis: AutocompleteService fügt keine UI-Steuerelemente ein. Stattdessen wird mit der oben genannten Methode ein Array mit vorgeschlagenen Objekten ausgegeben. Jedes vorgeschlagene Objekt enthält den Text der Vervollständigung sowie Referenzinformationen und detaillierte Angaben dazu, inwieweit das Ergebnis mit der Nutzereingabe übereinstimmt. Weitere Informationen finden Sie unten.

Widget für die automatische Vervollständigung hinzufügen

Über das Autocomplete-Widget wird ein Texteingabefeld auf der Webseite eingebettet, es werden Vorschläge für Orte in einer Auswahlliste in der Benutzeroberfläche angezeigt und Ortsdetails als Antwort auf getPlace()-Anfragen ausgegeben. Jeder Eintrag in der Auswahlliste entspricht einem einzelnen Ort, wie in der Places API definiert.

Der Konstruktor Autocomplete verwendet 2 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 Argument AutocompleteOptions, das die folgenden Attribute enthalten kann:
    • Ein Array mit Datenfeldern (fields), die in die Place Details-Antwort für das vom Nutzer ausgewählte PlaceResult-Ergebnis aufgenommen werden sollen. Wenn das Attribut nicht festgelegt ist oder ['ALL'] übergeben wird, werden alle verfügbaren Felder zurückgegeben und in Rechnung gestellt. Für Produktionsumgebungen wird hiervon abgeraten. Eine Liste der Felder finden Sie unter PlaceResult.
    • Ein Array von types, das einen expliziten Typ oder mehrere Typen angibt, wie in den unterstützten Typen aufgeführt. Wenn kein Typ angegeben ist, werden alle Typen zurückgegeben.
    • bounds ist ein google.maps.LatLngBounds-Objekt, mit dem das Gebiet angegeben wird, in dem nach Orten gesucht wird. Bei den Ergebnissen werden Orte innerhalb dieses Gebiets bevorzugt, es werden jedoch nicht nur Orte gefunden.
    • strictBounds ist ein Wert vom Typ „boolean“, der angibt, ob über die API nur die Orte zurückgegeben werden sollen, die sich genau in der mit dem bounds-Objekt angegebenen Region befinden. Die API gibt keine Ergebnisse außerhalb dieser Region zurück, selbst wenn sie mit der Nutzereingabe übereinstimmen.
    • Mit componentRestrictions können Ergebnisse auf bestimmte Gruppen eingeschränkt werden. Derzeit können Sie mit componentRestrictions nach bis zu 5 Ländern filtern. Länder müssen als Ländercode mit 2 Zeichen gemäß ISO 3166-1 Alpha-2 übergeben werden. In einer Liste mit Ländercodes müssen mehrere Länder übergeben werden.

      Hinweis: Wenn unerwartete Ergebnisse mit einem Ländercode ausgegeben werden, sollten Sie prüfen, ob Sie einen Code verwenden, der die gewünschten Länder, Außengebiete und besonderen Gebiete von geografischem Interesse umfasst. Informationen zu den Codes finden Sie in der ISO-3166-Ländercodeliste auf Wikipedia oder auf der ISO-Onlinebrowsing-Plattform.

    • Mit placeIdOnly kann das Autocomplete-Widget angewiesen werden, nur Orts-IDs abzurufen. Beim Aufrufen von getPlace() für das Autocomplete-Objekt werden für die verfügbaren PlaceResult-Ergebnisse nur die Attribute 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.

Automatische Vervollständigungen einschränken

Standardmäßig werden bei Place Autocomplete alle Ortstypen angezeigt, wobei die Vorschläge nach Nähe zum Nutzerstandort gewichtet werden. Es werden alle verfügbaren Datenfelder für den vom Nutzer ausgewählten Ort abgerufen. Legen Sie die Optionen für Place Autocomplete so fest, dass die für Ihren Anwendungsfall relevanteren Vorschläge präsentiert werden.

Optionen bei der Erstellung festlegen

Der Konstruktor Autocomplete akzeptiert einen AutocompleteOptions-Parameter, über den beim Erstellen des Widgets Einschränkungen angegeben werden können. Im folgenden Beispiel werden die Optionen bounds, componentRestrictions und types so festgelegt, dass Orte vom Typ establishment angefordert werden. Dabei werden Orte innerhalb des festgelegten geografischen Gebiets bevorzugt und Vorschläge auf Orte in den USA beschränkt. Mit der Option fields geben Sie an, welche Informationen zum ausgewählten Ort zurückgegeben werden sollen.

Rufen Sie setOptions() auf, um den Wert einer Option für ein vorhandenes Widget zu ändern.

TypeScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
  types: ["establishment"],
};

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

JavaScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
  types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

Datenfelder festlegen

Legen Sie Datenfelder fest, um zu verhindern, dass nicht benötigte Places Data SKUs in Rechnung gestellt werden. Fügen Sie das Attribut fields in die AutocompleteOptions ein, die wie im vorherigen Beispiel an den Widget-Konstruktor übergeben werden, oder rufen Sie setFields() für ein vorhandenes Autocomplete-Objekt auf.

autocomplete.setFields(["place_id", "geometry", "name"]);

Gewichtungen und Suchbereichsgrenzen für die automatische Vervollständigung festlegen

Durch Gewichtungen werden die Ergebnisse der automatischen Vervollständigung zugunsten eines bestimmten Ortes oder Bereiches bevorzugt. Gehen Sie dabei so vor:

  • Legen Sie bei der Erstellung des Autocomplete-Objekts Grenzen fest.
  • Ändern Sie die Grenzen eines vorhandenen Autocomplete-Objekts.
  • Legen Sie die Grenzen auf den Darstellungsbereich der Karte fest.
  • Beschränken Sie die Suche auf die angegebenen Grenzen.
  • Schränken Sie die Suche auf ein bestimmtes Land ein.

Im vorherigen Beispiel sehen Sie, wie Grenzen beim Erstellen festgelegt werden. Die folgenden Beispiele zeigen weitere Gewichtungsmöglichkeiten.

Grenzen eines bestehenden Objekts für die automatische Vervollständigung ändern

Rufen Sie setBounds() auf, um den Suchbereich für ein vorhandenes Autocomplete-Objekt in einen rechteckigen Bereich zu ändern.

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);

JavaScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
Grenzen auf den Darstellungsbereich der Karte festlegen

Verwenden Sie bindTo(), damit die Ergebnisse entsprechend dem Darstellungsbereich der Karte gewichtet werden, auch wenn er sich ändert.

TypeScript

autocomplete.bindTo("bounds", map);

JavaScript

autocomplete.bindTo("bounds", map);

Mit unbind() können Sie die Verknüpfung zwischen der automatischen Vervollständigung und dem Darstellungsbereich der Karte aufheben.

TypeScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

JavaScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

Beispiel ansehen

Suche auf die aktuellen Grenzen beschränken

Legen Sie die Option strictBounds fest, um die Ergebnisse auf die aktuellen Grenzen zu beschränken, unabhängig davon, ob sie auf dem Darstellungsbereich der Karte oder auf rechteckigen Begrenzungen basieren.

autocomplete.setOptions({ strictBounds: true });
Vorschläge auf ein bestimmtes Land beschränken

Sie können die Option componentRestrictions verwenden oder setComponentRestrictions() aufrufen, um die automatisch vervollständigten Suchergebnisse auf bis zu 5 Länder einzugrenzen.

TypeScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

JavaScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

Beispiel ansehen

Ortstypen einschränken

Verwenden Sie die Option types oder rufen Sie setTypes() auf, um Vorschläge auf bestimmte Ortstypen einzuschränken. Mit dieser Einschränkung wird ein Typ oder werden mehrere Typen angegeben, wie unter Ortstypen aufgeführt. Wenn keine Einschränkung angegeben ist, werden alle Typen zurückgegeben.

Für den Wert der types-Option oder den an setTypes() übergebenen Wert können Sie Folgendes angeben:

  • Ein Array, das bis zu 5 Werte aus Tabelle 1 oder Tabelle 2 der Ortstypen enthält Beispiel:

    types: ['hospital', 'pharmacy', 'bakery', 'country']

    Oder:

    autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
  • Einen beliebigen Filter aus Tabelle 3 der Ortstypen. Sie können nur einen Wert aus Tabelle 3 angeben.

In folgenden Fällen wird die Anfrage abgelehnt:

  • Sie haben mehr als 5 Typen angegeben.
  • Sie haben einen unbekannten Typ angegeben.
  • Sie haben sowohl Typen aus Tabelle 1 oder Tabelle 2 als auch Filter aus Tabelle 3 angegeben.

In der Places Autocomplete-Demo sehen Sie die Unterschiede bei den Vorschlägen, je nachdem, welche Ortstypen Sie festlegen.

Demo ansehen

Ortsinformationen abrufen

Wenn ein Nutzer einen Ort aus den Vorschlägen auswählt, die an das Textfeld mit automatischer Vervollständigung angehängt sind, löst der Dienst ein place_changed-Ereignis aus. So rufen Sie Informationen zum Ort ab:

  1. Erstellen Sie einen Event-Handler für das place_changed-Ereignis und rufen Sie addListener() für das Autocomplete-Objekt auf, um den Handler hinzuzufügen.
  2. Rufen Sie Autocomplete.getPlace() für das Autocomplete-Objekt auf, um ein PlaceResult-Objekt zu erhalten, mit dem dann weitere Informationen zum ausgewählten Ort abgerufen werden können.

Wenn ein Nutzer einen Ort auswählt, werden über die automatische Vervollständigung standardmäßig alle verfügbaren Datenfelder für den ausgewählten Ort zurückgegeben. Ihnen werden dann die entsprechenden Kosten in Rechnung gestellt. Mit Autocomplete.setFields() können Sie festlegen, welche Felder mit Ortsdaten zurückgegeben werden sollen. Sehen Sie sich weitere Informationen zum PlaceResult-Objekt an, einschließlich einer Liste von Feldern mit Ortsdaten, die Sie anfordern können. Damit Sie nicht für Daten zahlen müssen, die Sie nicht benötigen, verwenden Sie Autocomplete.setFields() und geben Sie nur die erforderlichen Daten an.

Das Attribut name enthält die description aus den Place Autocomplete-Vervollständigungen. Weitere Informationen zu description finden Sie in der Dokumentation zu Place Autocomplete.

Für ein Adressformular ist es sinnvoll, die Adresse in einem strukturierten Format abzurufen. Damit die strukturierte Adresse für den ausgewählten Ort zurückgegeben wird, rufen Sie Autocomplete.setFields() auf und geben Sie das Feld address_components an.

Im folgenden Beispiel wird die automatische Vervollständigung genutzt, um die Felder eines Adressformulars auszufüllen.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

Beispiel ansehen

Platzhaltertext anpassen

Standardmäßig enthält das vom Dienst zur automatischen Vervollständigung erstellte Textfeld einen Standardtext für Platzhalter. Wenn Sie den Text ändern möchten, legen Sie für das placeholder-Attribut das input-Element fest:

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

Hinweis: Der Standardplatzhaltertext wird automatisch lokalisiert. Wenn Sie einen eigenen Platzhalterwert angeben, müssen Sie die Lokalisierung dieses Wertes in Ihrer Anwendung selbst vornehmen. Weitere Informationen dazu, wie die Google Maps JavaScript API die zu verwendende Sprache auswählt, finden Sie in der Dokumentation zur Lokalisierung.

Weitere Informationen zum Anpassen der Widgetdarstellung finden Sie unter Stil für die Widgets für die automatische Vervollständigung und das Suchfeld festlegen.

Über das SearchBox-Objekt können Nutzer eine textbasierte geografische Suche durchführen, etwa „pizza in new york“ oder „schuhgeschäfte in der nähe der königsstraße“. Sie können das SearchBox-Element an ein Textfeld anhängen. Sobald Text eingegeben wird, liefert der Dienst Vorschläge in Form einer Drop-down-Auswahlliste.

SearchBox liefert eine umfangreiche Liste von Vorschlägen, die Orte (wie in der Places API definiert) plus vorgeschlagene Suchbegriffe umfassen kann. Gibt der Nutzer beispielsweise „pizza in new“ ein, kann die Auswahlliste den Eintrag „pizza in New York, NY“ sowie die Namen verschiedener Pizzerien beinhalten. Wenn ein Nutzer einen Ort aus der Liste auswählt, werden Informationen zu diesem Ort an das Suchfeldobjekt zurückgegeben, die dann von Ihrer Anwendung abgerufen werden können.

Der Konstruktor SearchBox verwendet 2 Argumente:

  • Ein HTML-input-Element des Typs text. Das ist das Eingabefeld, das vom SearchBox-Dienst überwacht und an das die Ergebnisse angehängt werden.
  • Ein options-Argument, das das Attribut bounds enthalten kann: bounds ist ein google.maps.LatLngBounds-Objekt, das den Bereich definiert, in dem nach Orten gesucht wird. Bei den Ergebnissen werden Orte innerhalb dieses Gebiets bevorzugt, sind aber nicht auf sie beschränkt.

Im folgenden Code wird der Parameter „bounds“ verwendet, um Ergebnisse innerhalb eines bestimmten geografischen Bereichs, der durch Längen- und Breitenkoordinaten definiert 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 das Suchfeld ändern

Wenn Sie den Suchbereich für ein vorhandenes SearchBox-Element ändern möchten, rufen Sie setBounds() für das SearchBox-Objekt auf und übergeben Sie das entsprechende LatLngBounds-Objekt.

Beispiel ansehen

Ortsinformationen abrufen

Wenn der Nutzer ein Element aus den Vorschlägen auswählt, die an das Suchfeld angehängt sind, löst der Dienst ein places_changed-Ereignis aus. Sie können getPlaces() für das SearchBox-Objekt aufrufen, um ein Array mit mehreren Vorschlägen abzurufen, von denen jeder ein PlaceResult-Objekt ist.

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

TypeScript

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

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

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

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      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,
        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);
});

JavaScript

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

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

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

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const 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,
        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 ansehen

Weitere Informationen zum Anpassen der Widgetdarstellung finden Sie unter Stil für die Widgets für die automatische Vervollständigung und das Suchfeld festlegen.

Vorschläge des Place Autocomplete-Dienstes programmatisch abrufen

Verwenden Sie die AutocompleteService-Klasse, um Vorschläge programmatisch abzurufen. AutocompleteService fügt keine UI-Steuerelemente ein. Stattdessen wird ein Array mit Vorhersageobjekten zurückgegeben, von denen jedes Objekt den Text des Vorschlags sowie Referenzinformationen und Details bezüglich der Übereinstimmung des Ergebnisses mit der Nutzereingabe enthält. Das ist nützlich, wenn Sie mehr Kontrolle über die Benutzeroberfläche haben möchten, als Autocomplete und SearchBox (siehe oben) bieten.

Mit AutocompleteService können folgende Methoden genutzt werden:

  • getPlacePredictions() gibt Ortsvorschläge zurück. Hinweis: Ein Ort kann ein Gebäude, ein geografischer Standort oder ein POI sein, wie in der Places API definiert.
  • getQueryPredictions() gibt eine umfangreiche Liste von Vorschlägen zurück, die Orte (wie in der Places API definiert) plus vorgeschlagene Suchbegriffe umfassen kann. Gibt der Nutzer beispielsweise „pizza in new“ ein, kann die Auswahlliste den Eintrag „pizza in New York, NY“ sowie die Namen verschiedener Pizzerien beinhalten.

Über beide der oben genannten Methoden wird ein Array mit vorgeschlagenen Objekten in folgender Form zurückgegeben:

  • description ist der übereinstimmende Vorschlag.
  • distance_meters ist die Entfernung in Metern des Ortes zum angegebenen AutocompletionRequest.origin.
  • matched_substrings enthält eine Reihe von Teilstrings in der Beschreibung, die mit Elementen in der Nutzereingabe übereinstimmen. Das ist hilfreich, um diese Teilstrings in Ihrer Anwendung hervorzuheben. In vielen Fällen wird die Abfrage als Teilstring des Beschreibungsfelds dargestellt.
    • length ist die Länge des Teilstrings.
    • offset ist das Zeichenoffset, gemessen ab dem Anfang des Beschreibungsstrings, an dem der übereinstimmende Teilstring erscheint.
  • place_id ist eine Kennung in Textform, die einen Ort eindeutig definiert. Übergeben Sie die Kennung im Feld placeId einer Place Details-Anfrage, um Informationen zum Ort abzurufen. Weitere Informationen dazu, wie Sie Verweise auf Orte mit einer Orts-ID erstellen
  • terms ist ein Array mit den Elementen der Abfrage. Bei einem Ort ist normalerweise jedes Element ein Teil der Adresse.
    • offset ist das Zeichenoffset, gemessen ab dem Anfang des Beschreibungsstrings, an dem der übereinstimmende Teilstring erscheint.
    • value ist der übereinstimmende Begriff.

Im folgenden Beispiel wird eine Vervollständigungsanfrage für den Text „pizza in der nähe“ ausgeführt und die Ergebnisse werden in einer Liste angezeigt.

TypeScript

// 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(): void {
  const displaySuggestions = function (
    predictions: google.maps.places.QueryAutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) {
    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") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;

JavaScript

// 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() {
  const displaySuggestions = function (predictions, status) {
    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 service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

window.initService = initService;

CSS

HTML

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

Testbeispiel

Beispiel ansehen

Sitzungstokens

In AutocompleteService.getPlacePredictions() werden Sitzungstokens genutzt, um Anfragen zur automatischen Vervollständigung zu Abrechnungszwecken zu gruppieren. Sitzungstokens fassen die Abfrage- und Auswahlphasen einer Nutzeranfrage zur automatischen Vervollständigung zu Abrechnungszwecken zu einer separaten Sitzung zusammen. Die Sitzung wird gestartet, wenn der Nutzer mit der Eingabe beginnt, und endet, wenn er einen Ort auswählt. Jede Sitzung kann mehrere Abfragen und eine Ortsauswahl umfassen. Sobald eine Sitzung beendet wird, ist das Token nicht mehr gültig. Ihre Anwendung muss für jede Sitzung ein neues Token generieren. Wir empfehlen, Sitzungstokens für alle Sitzungen zu verwenden, bei denen eine automatische Vervollständigung erfolgt. Wenn der sessionToken-Parameter fehlt oder Sie ein Sitzungstoken wiederverwenden, wird die Sitzung so in Rechnung gestellt, als wäre kein Sitzungstoken bereitgestellt worden. Jede Anfrage wird separat abgerechnet.

Sie können dasselbe Sitzungstoken für eine Place Details-Anfrage für den Ort verwenden, der beim Aufruf von AutocompleteService.getPlacePredictions() zurückgegeben wurde. In diesem Fall wird die Place Autocomplete-Anfrage mit der Place Details-Anfrage kombiniert und der Aufruf als reguläre Place Details-Anfrage berechnet. Für die Anfrage zur automatischen Vervollständigung fallen keine separaten Kosten an.

Für jede neue Sitzung muss ein eindeutiges Sitzungstoken weitergegeben werden. Wenn Sie dasselbe Token für mehr als eine Sitzung mit automatischer Vervollständigung verwenden, wird die entsprechende Sitzung ungültig. Alle Anfragen mit automatischer Vervollständigung in den ungültigen Sitzungen werden einzeln über SKU: Query Autocomplete – Per Request abgerechnet. Weitere Informationen zu Sitzungstokens

Das folgende Beispiel zeigt, wie ein Sitzungstoken erstellt und dann in einem AutocompleteService-Element übergeben wird. Die displaySuggestions()-Funktion wurde der Einfachheit halber weggelassen:

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

Für jede neue Sitzung muss ein eindeutiges Sitzungstoken weitergegeben werden. Wenn Sie dasselbe Token für mehr als eine Sitzung verwenden, wird jede Anfrage separat in Rechnung gestellt.

Weitere Informationen zu Sitzungstokens

Stil für die Widgets für die automatische Vervollständigung und das Suchfeld festlegen

Standardmäßig wird auf die UI-Elemente, die für Autocomplete und SearchBox bereitgestellt werden, ein Stil angewendet, um sie in die Google Maps-Karte einzubinden. Sie können den Stil an den Ihrer Website anpassen. Folgende CSS-Klassen sind verfügbar. Alle unten aufgeführten Klassen gelten sowohl für das Autocomplete- als auch für das SearchBox-Widget.

Eine grafische Darstellung der CSS-Klassen für die Widgets für die automatische Vervollständigung und das Suchfeld
CSS-Klassen für die Widgets für die automatische Vervollständigung und das Suchfeld
CSS-Klasse Beschreibung
pac-container Das visuelle Element mit der Liste der Vorschläge, die vom Place Autocomplete-Dienst zurückgegeben wurden. Diese Liste wird als Drop-down-Liste unter dem Autocomplete- oder SearchBox-Widget angezeigt.
pac-icon Das links von jedem Eintrag in der Liste angezeigte Symbol
pac-item Ein Eintrag in der Liste der vom Autocomplete- oder SearchBox-Widget gelieferten Vorschläge
pac-item:hover Das Element, das zu sehen ist, wenn der Nutzer den Mauszeiger darauf bewegt.
pac-item-selected Das Element, das zu sehen ist, wenn der Nutzer es über die Tastatur auswählt. Hinweis: Die ausgewählten Elemente sind Mitglied dieser Klasse und der Klasse pac-item.
pac-item-query Ein Bereich innerhalb eines pac-item-Elements, das den Hauptteil des Vorschlags 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 Suchanfragen, wie „Pizza in New York“, enthält der Bereich den vollständigen Text der Anfrage. Standardmäßig ist das pac-item-query-Element schwarz. Wenn zusätzlicher Text in pac-item vorhanden ist, befindet er sich außerhalb von pac-item-query und übernimmt den Stil von pac-item. Standardmäßig wird das Element grau dargestellt. Der zusätzliche Text ist in der Regel eine Adresse.
pac-matched Der Teil des zurückgegebenen Vorschlags, der mit der Eingabe des Nutzers übereinstimmt. Standardmäßig wird dieser übereinstimmende Text fett markiert. Der übereinstimmende Text kann sich innerhalb von pac-item an einer beliebigen Stelle befinden. Er ist nicht unbedingt Teil des pac-item-query-Elements und kann teilweise in pac-item-query sowie teilweise im verbleibenden Text in pac-item enthalten sein.

Place Autocomplete-Optimierung

Hier finden Sie Best Practices, damit Sie den Place Autocomplete-Dienst optimal nutzen können.

Allgemeine Richtlinien:

Best Practices für die Kostenoptimierung

Einfache Kostenoptimierung

Wenn Sie die Kosten für die Nutzung des Place Autocomplete-Dienstes optimieren möchten, verwenden Sie Feldmasken in Place Details- und Place Autocomplete-Widgets, damit nur die erforderlichen Ortsdatenfelder zurückgegeben werden.

Erweiterte Kostenoptimierung

Wenn Sie Place Autocomplete programmatisch implementieren, erhalten Sie Zugriff auf die Preise pro Anfrage und können Geocoding API-Ergebnisse für den ausgewählten Ort anstelle von Place Details-Ergebnissen anfordern. Wenn Sie die Kosten pro Anfrage mit der Geocoding API kombinieren, ist das kosteneffizienter als die Verwendung von Kosten pro Sitzung (sitzungsbasiert), sofern die beiden folgenden Bedingungen erfüllt werden:

  • Wenn Sie nur den Breiten- oder Längengrad oder die Adresse des vom Nutzer ausgewählten Orts abrufen möchten, erhalten Sie entsprechende Informationen über die Geocoding API, für die weniger Kosten anfallen als bei einem Place Details-Aufruf.
  • Wenn Nutzer eine automatische Vervollständigung bei durchschnittlich maximal 4 entsprechenden Anfragen auswählen, ist der Preis pro Anfrage möglicherweise kosteneffizienter als der Preis pro Sitzung.
Wenn Sie Hilfe bei der Auswahl der Place Autocomplete-Implementierung benötigen, klicken Sie auf den Tab, der Ihrer Antwort auf die folgende Frage am ehesten entspricht.

Benötigt Ihre Anwendung weitere Informationen als Adresse und Breiten-/Längengrad des ausgewählten Vorschlags?

Ja, weitere Details sind erforderlich.

Nutzen Sie das sitzungsbasierte Place Autocomplete-Modell mit Place Details-Anfragen.
Da für Ihre Anwendung Details zum Ort erforderlich sind, etwa der Name des Orts, der Unternehmensstatus oder die Öffnungszeiten, sollte bei der Implementierung von Place Autocomplete ein Sitzungstoken (programmatisch oder im JavaScript-, Android- oder iOS-Widget integriert) verwendet werden. Dabei fallen insgesamt 0,017 $ pro Sitzung zzgl. der Kosten für die genutzte Places-Daten-SKU an, je nachdem, welche Datenfelder angefordert werden.1

Widget-Implementierung
Die Sitzungsverwaltung ist automatisch in das JavaScript-,Android- oder iOS-Widget integriert. Das umfasst sowohl Place Autocomplete-Anfragen als auch die Place Details-Anfrage für den ausgewählten Vorschlag. Der fields-Parameter muss festgelegt werden, damit nur die erforderlichen Ortsdatenfelder angefordert werden.

Programmatische Implementierung
Verwenden Sie für Place Autocomplete-Anfragen ein Sitzungstoken. Binden Sie die folgenden Parameter ein, wenn Sie Details zum Ort für den ausgewählten Vorschlag anfordern:

  1. Die Orts-ID aus der Place Autocomplete-Antwort
  2. Das Sitzungstoken, das in der Place Autocomplete-Anfrage verwendet wird
  3. Den fields-Parameter, mit dem die erforderlichen Ortsdatenfelder angegeben werden

Nein, es sind nur Adresse und Standort erforderlich.

Wenn Sie Place Autocomplete in Ihrer Anwendung stark nutzen, kann es kostengünstiger sein, anstelle von Places Details die Geocoding API zu verwenden. Die Effizienz der Autovervollständigung jeder Anwendung hängt davon ab, was die Nutzer eingeben, wo die Anwendung verwendet wird und ob die Best Practices zur Leistungsoptimierung implementiert wurden.

Um die folgende Frage beantworten zu können, analysieren Sie, wie viele Zeichen Nutzer durchschnittlich eingeben, bevor sie in Ihrer Anwendung einen Place Autocomplete-Vorschlag auswählen.

Wählen Ihre Nutzer durchschnittlich bei 4 oder weniger Anfragen einen Place Autocomplete-Vorschlag aus?

Ja

Implementieren Sie Place Autocomplete programmatisch ohne Sitzungstokens und rufen Sie die Geocoding API für den ausgewählten Ortsvorschlag auf.
Über die Geocoding API erhalten Sie Adressen und Breiten-/Längenkoordinaten für 0,005 $ pro Anfrage. Wenn 4 Place Autocomplete-Anfragen mit Preis pro Anfrage ausgeführt werden, fallen Kosten von 0,01132 $ an. Die Gesamtkosten der 4 Anfragen plus die Kosten für einen Geocoding API-Aufruf zum ausgewählten Ortsvorschlag betragen 0,01632 $, also weniger als der Preis pro Sitzung mit automatischer Vervollständigung von 0,017 $ pro Sitzung.1

Wenn Sie die Best Practices zur Leistung beachten, erhalten Ihre Nutzer bereits mit weniger eingegebenen Zeichen passende Vorschläge.

Nein

Nutzen Sie das sitzungsbasierte Place Autocomplete-Modell mit Place Details-Anfragen.
Die Kosten für die durchschnittliche Anzahl der Anfragen, die voraussichtlich gestellt werden müssen, bevor ein Nutzer einen Place Autocomplete-Vorschlag auswählt, übersteigen den Preis pro Sitzung. Daher sollte Ihre Place Autocomplete-Implementierung sowohl für Place Autocomplete-Anfragen als auch zugehörige Place Details-Anfragen ein Sitzungstoken nutzen, für das insgesamt 0,017 $ pro Sitzung anfallen.1

Widget-Implementierung
Die Sitzungsverwaltung ist automatisch in das JavaScript-,Android- oder iOS-Widget integriert. Das umfasst sowohl Place Autocomplete-Anfragen als auch die Place Details-Anfrage für den ausgewählten Vorschlag. Der fields-Parameter muss festgelegt werden, damit nur die grundlegenden Datenfelder angefordert werden.

Programmatische Implementierung
Verwenden Sie für Place Autocomplete-Anfragen ein Sitzungstoken. Binden Sie die folgenden Parameter ein, wenn Sie Details zum Ort für den ausgewählten Vorschlag anfordern:

  1. Die Orts-ID aus der Place Autocomplete-Antwort
  2. Das Sitzungstoken, das in der Place Autocomplete-Anfrage verwendet wird
  3. Den fields-Parameter, mit dem grundlegende Datenfelder wie das Feld „Adresse“ oder „Geometrie“ angegeben werden

Place Autocomplete-Anfragen verzögern
Sie können Place Autocomplete-Anfragen verzögern, bis der Nutzer die ersten 3 oder 4 Zeichen eingegeben hat, damit weniger Anfragen über die Anwendung gestellt werden. Angenommen, Place Autocomplete-Anfragen für jedes Zeichen werden erst gestellt, nachdem Nutzer 3 Zeichen eingegeben haben. Wenn ein Nutzer 7 Zeichen eingibt und dann einen Vorschlag auswählt, für den eine Geocoding API-Anfrage gestellt wird, fallen insgesamt Kosten von 0,01632 $ an (4 × 0,00283 $ pro Autocomplete-Anfrage + 0,005 $ für die Geocoding-Anfrage).1

Wenn sich durch das Verzögern von Anfragen Ihre durchschnittliche Anzahl programmatischer Anfragen auf unter 4 senken lässt, empfehlen wir, die Anleitung für eine leistungsstarke Place Autocomplete-Funktion mit Geocoding API-Implementierung zu beachten. Das Verzögern von Anfragen wird vom Nutzer, der evtl. bei jedem eingegebenen Zeichen mit Vorschlägen rechnet, möglicherweise als Latenz wahrgenommen.

Wenn Sie die Best Practices zur Leistung beachten, erhalten Ihre Nutzer bereits mit weniger eingegebenen Zeichen passende Vorschläge.


  1. Die hier aufgeführten Kosten sind in US-Dollar angegeben. Vollständige Preisinformationen finden Sie auf der Seite Google Maps Platform – Abrechnung.

Best Practices für die Leistung

Im Folgenden finden Sie Tipps zum Optimieren der Place Autocomplete-Leistung:

  • Binden Sie in Ihre Place Autocomplete-Implementierung länderspezifische Einschränkungen, eine Standortgewichtung und (bei programmatischen Implementierungen) eine Spracheinstellung ein. Die Spracheinstellung ist bei Widgets nicht erforderlich, weil bei ihnen die Spracheinstellungen aus dem Browser oder vom Mobilgerät des Nutzers übernommen werden.
  • Wenn Place Autocomplete mit einer Karte kombiniert wird, können Sie den Standort anhand des Darstellungsbereichs der Karte gewichten.
  • Wenn ein Nutzer keinen der Vorschläge der automatischen Vervollständigungen auswählt, was in der Regel geschieht, wenn es sich bei keinem Vorschlag um die gewünschte Adresse handelt, können Sie anhand der ursprünglichen Nutzereingabe versuchen, relevantere Ergebnisse zu erhalten:
    • Wenn der Nutzer voraussichtlich nur Adressinformationen eingibt, können Sie die ursprüngliche Nutzereingabe bei einem Aufruf der Geocoding API noch einmal verwenden.
    • Wenn Sie davon ausgehen, dass der Nutzer Abfragen für einen bestimmten Ort mithilfe von Name oder Adresse eingibt, verwenden Sie eine Find Place-Anfrage. Wenn nur in einer bestimmten Region Ergebnisse erwartet werden, nutzen Sie die Standortgewichtung.
    Bei folgenden Szenarien empfehlen wir, ein Fallback auf die Geocoding API zu nutzen:
    • Wenn Nutzer Adressen mit Zusätzen in Ländern eingeben, in denen die automatische Vervollständigung von Adresszusätzen noch nicht komplett unterstützt wird. Das ist z. B. in Tschechien, Estland und Litauen der Fall. So wird bei der tschechischen Adresse „Stroupežnického 3191/17, Praha“ z. B. eine teilweise Vervollständigung in Place Autocomplete ausgegeben.
    • Wenn Nutzer Adressen mit Präfixen für Straßenabschnitte eingeben, z. B. „23-30 29th St, Queens“ in New York City oder „47-380 Kamehameha Hwy, Kaneohe“ auf der Insel Kauai in Hawaii.

Nutzungslimits und Richtlinien

Kontingente

Informationen zu Kontingenten und Preisen finden Sie in der Dokumentation zu Nutzung und Abrechnung der Places API.

Richtlinien

Die Nutzung der Places Library, Maps JavaScript API unterliegt den Richtlinien für die Places API.