Places Widgets

Klasse PlaceAutocompleteElement

google.maps.places.PlaceAutocompleteElement Klasse

PlaceAutocompleteElement ist eine HTMLElement-Unterklasse, die eine UI-Komponente für die Places Autocomplete API bereitstellt.

PlaceAutocompleteElement verwendet intern automatisch AutocompleteSessionToken, um die Abfrage- und Auswahlphasen einer Nutzeranfrage zur automatischen Vervollständigung zu gruppieren.

Der erste Aufruf von Place.fetchFields für ein Place, das von PlacePrediction.toPlace zurückgegeben wird, enthält automatisch das Sitzungstoken, das zum Abrufen des PlacePrediction verwendet wurde.

Weitere Informationen zur Funktionsweise von Sitzungen finden Sie unter https://developers.google.com/maps/documentation/places/web-service/place-session-tokens.

Benutzerdefiniertes Element:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PlaceAutocompleteElementOptions.

Zugriff durch Anrufen von const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Parameter:
includedPrimaryTypes
Typ:Array<string> optional
Der primäre Ortstyp (z. B. „restaurant“ oder „gas_station“) ist enthalten.

Ein Ort wird nur zurückgegeben, wenn sein primärer Typ in dieser Liste enthalten ist. Sie können bis zu fünf Werte angeben. Wenn keine Typen angegeben sind, werden alle Ortstypen zurückgegeben.
HTML-Attribut
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
Typ:Array<string> optional
Schließen Sie nur Ergebnisse in den angegebenen Regionen ein, die als bis zu 15 zweistellige CLDR-Regionencodes angegeben werden. Ein leeres Set schränkt die Ergebnisse nicht ein. Wenn sowohl locationRestriction als auch includedRegionCodes festgelegt sind, befinden sich die Ergebnisse im Schnittbereich.
HTML-Attribut
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
Typ:LocationBias optional
Eine weiche Grenze oder ein Hinweis, der bei der Suche nach Orten verwendet werden soll.
locationRestriction
Typ:LocationRestriction optional
Grenzen zum Einschränken von Suchergebnissen.
name
Typ:string optional
Der Name, der für das Eingabeelement verwendet werden soll. Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Entspricht dem Verhalten des Attributs „name“ für Eingaben. Beachten Sie, dass dieser Name verwendet wird, wenn ein Formular gesendet wird. Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
HTML-Attribut
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
Der Ursprung, von dem aus die Entfernung berechnet werden soll. Wenn keine Angabe erfolgt, wird die Entfernung nicht berechnet. Die Höhe wird, sofern angegeben, nicht in die Berechnung einbezogen.
HTML-Attribut
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
requestedLanguage
Typ:string optional
Eine Sprach-ID für die Sprache, in der die Ergebnisse nach Möglichkeit zurückgegeben werden sollen. Ergebnisse in der ausgewählten Sprache werden möglicherweise höher eingestuft, aber Vorschläge sind nicht auf diese Sprache beschränkt. Hier finden Sie eine Liste der unterstützten Sprachen.
HTML-Attribut
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Typ:string optional
Ein Regionscode, der für die Ergebnisformatierung und ‑filterung verwendet wird. Die Vorschläge werden dadurch nicht auf dieses Land beschränkt. Für den Regionscode ist ein zweistelliger Ländercode der Top-Level-Domain (ccTLD) zulässig. Die meisten ccTLD-Codes entsprechen den ISO 3166-1-Codes, mit folgenden Ausnahmen. So lautet beispielsweise die ccTLD des Vereinigten Königreichs „uk“ (.co.uk), der ISO 3166-1-Code dagegen „gb“ (technisch für das Land „Vereinigtes Königreich Großbritannien und Nordirland“).
HTML-Attribut
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
Typ:UnitSystem optional
Das Einheitensystem, das zum Anzeigen von Entfernungen verwendet wird. Wenn nicht angegeben, wird das Einheitensystem durch „requestedRegion“ bestimmt.
HTML-Attribut
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
prediction-item
Ein Element im Drop-down-Menü mit Vorschlägen, das einen einzelnen Vorschlag darstellt.
prediction-item-icon
Das links von jedem Element in der Liste der Vorhersagen angezeigte Symbol.
prediction-item-main-text
Ein Teil des Vorhersageelements, der den Haupttext der Vorhersage enthält. Bei geografischen Standorten enthält es einen Ortsnamen wie "Sydney" oder einen Straßennamen und eine Hausnummer wie "Königsstraße 10". Standardmäßig ist der Haupttext des Vorschlags schwarz. Wenn zusätzlicher Text im Vorhersageelement vorhanden ist, befindet er sich außerhalb von „prediction-item-main-text“ und übernimmt den Stil von „prediction-item“. Standardmäßig wird das Element grau dargestellt. Der zusätzliche Text ist in der Regel eine Adresse.
prediction-item-match
Der Teil der gelieferten Vervollständigung, der der Eingabe des Nutzers entspricht. Standardmäßig wird dieser übereinstimmende Text durch Fettformatierung hervorgehoben. Der übereinstimmende Text kann sich innerhalb von „prediction-item“ an einer beliebigen Stelle befinden. Er ist nicht unbedingt Teil von „prediction-item-main-text“.
prediction-item-selected
Das Element, das zu sehen ist, wenn der Nutzer es über die Tastatur aufruft. Hinweis: Die ausgewählten Elemente sind sowohl von diesen Teilformatierungen als auch von den Teilformatierungen für Vorhersageelemente betroffen.
prediction-list
Das visuelle Element, das die Liste der Vorhersagen enthält, die vom Place Autocomplete-Dienst zurückgegeben wurden. Diese Liste wird als Drop-down-Liste unter dem PlaceAutocompleteElement angezeigt.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter:
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß-/Kleinschreibung muss beachtet werden.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der Methode „handleEvent“ sein.
  • options:  boolean|AddEventListenerOptions optional Optionen Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert:void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.
gmp-error
function(errorEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn eine Anfrage an das Backend abgelehnt wurde (z.B. aufgrund eines falschen API-Schlüssels). Dieses Ereignis wird nicht weitergegeben.
gmp-select
function(placePredictionSelectEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn ein Nutzer einen Ortsvorschlag auswählt. Enthält ein PlacePrediction-Objekt, das in ein Place-Objekt konvertiert werden kann.

PlaceAutocompleteElementOptions Schnittstelle

google.maps.places.PlaceAutocompleteElementOptions-Schnittstelle

Optionen zum Erstellen eines PlaceAutocompleteElement. Eine Beschreibung der einzelnen Attribute finden Sie im Attribut mit demselben Namen in der Klasse „PlaceAutocompleteElement“.
locationBias optional
Typ:LocationBias optional
locationRestriction optional
Typ:LocationRestriction optional
name optional
Typ:string optional
requestedLanguage optional
Typ:string optional

Klasse PlacePredictionSelectEvent

google.maps.places.PlacePredictionSelectEvent Klasse

Dieses Ereignis wird erstellt, nachdem der Nutzer ein Vorschlagselement mit dem PlaceAutocompleteElement ausgewählt hat. Greifen Sie mit event.placePrediction auf die Auswahl zu.

 Konvertieren Sie „placePrediction“ in ein Place, indem Sie PlacePrediction.toPlace aufrufen.

Diese Klasse erweitert Event.

Zugriff durch Anrufen von const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
placePrediction
Konvertieren Sie dies in ein Place, indem Sie PlacePrediction.toPlace aufrufen.

PlaceAutocompleteRequestErrorEvent-Klasse

google.maps.places.PlaceAutocompleteRequestErrorEvent Klasse

Dieses Ereignis wird vom PlaceAutocompleteElement ausgegeben, wenn ein Problem mit der Netzwerkanfrage auftritt.

Diese Klasse erweitert Event.

Zugriff durch Anrufen von const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.

Klasse PlaceContextualElement

google.maps.places.PlaceContextualElement Klasse

Ein Widget, in dem mit dem Kontext-Token eine kontextbezogene Ansicht der Grounding-Antwort mit Google Maps angezeigt wird.

Benutzerdefiniertes Element:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PlaceContextualElementOptions.

Zugriff durch Anrufen von const {PlaceContextualElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
contextToken
Typ:string optional
Das Kontext-Token.
HTML-Attribut
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter:
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß-/Kleinschreibung muss beachtet werden.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der Methode „handleEvent“ sein.
  • options:  boolean|AddEventListenerOptions optional Optionen Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert:void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.

PlaceContextualElementOptions Schnittstelle

google.maps.places.PlaceContextualElementOptions-Schnittstelle

Optionen für PlaceContextualElement.
contextToken optional
Typ:string optional
Das Kontext-Token, das von der Antwort „Fundierung mit Google Maps“ bereitgestellt wird.

PlaceContextualListConfigElement class

google.maps.places.PlaceContextualListConfigElement Klasse

Ein HTML-Element, mit dem Optionen für die Listenansicht des kontextbezogenen Elements für Orte konfiguriert werden.

Benutzerdefiniertes Element:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PlaceContextualListConfigElementOptions.

Zugriff durch Anrufen von const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
layout
Das Layout.
HTML-Attribut
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
Typ:boolean optional
Gibt an, ob die Karte ausgeblendet ist.
HTML-Attribut
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter:
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß-/Kleinschreibung muss beachtet werden.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der Methode „handleEvent“ sein.
  • options:  boolean|AddEventListenerOptions optional Optionen Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert:void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.

PlaceContextualListConfigElementOptions-Schnittstelle

google.maps.places.PlaceContextualListConfigElementOptions-Schnittstelle

Optionen für PlaceContextualListConfigElement.
layout optional
Das Layout. Standardwert ist PlaceContextualListLayout.VERTICAL.
mapHidden optional
Typ:boolean optional
Gibt an, ob die Karte ausgeblendet ist. Standardmäßig wird die Karte angezeigt (Wert „false“).

PlaceContextualListLayout-Konstanten

google.maps.places.PlaceContextualListLayout Konstanten

Die Liste der Layouts, die das kontextbezogene Element für Orte für die Listenansicht unterstützt.

Zugriff durch Anrufen von const {PlaceContextualListLayout} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
COMPACT Kompaktes Listenlayout: Listenelemente werden als Links in einer einzelnen Zeile gerendert. Überläufe werden in einer Drop-down-Liste angezeigt.
VERTICAL Vertikales Listenlayout: Listenelemente werden als Karten in einer vertikalen Liste gerendert.

PlaceDetailsElement-Klasse

google.maps.places.PlaceDetailsElement Klasse

Ein HTML-Element, in dem Details zu einem Ort angezeigt werden. Geben Sie mit den Methoden configureFromPlace() oder configureFromLocation() die zu rendernden Inhalte an. Wenn Sie das Element „Ortsdetails“ verwenden möchten, müssen Sie die Places UI Kit API für Ihr Projekt in der Google Cloud Console aktivieren.

Benutzerdefiniertes Element:
<gmp-place-details size="small"></gmp-place-details>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PlaceDetailsElementOptions.

Zugriff durch Anrufen von const {PlaceDetailsElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
PlaceDetailsElement
PlaceDetailsElement([options])
Parameter:
place
Typ:Place optional
Schreibgeschützt. Place-Objekt mit der ID, dem Standort und dem Viewport des aktuell gerenderten Orts.
size
Typ:PlaceDetailsSize optional
Die Größenvariante des PlaceDetailsElement. Standardmäßig wird im Element PlaceDetailsSize.X_LARGE angezeigt.
HTML-Attribut
  • <gmp-place-details size="small"></gmp-place-details>
  • <gmp-place-details size="medium"></gmp-place-details>
  • <gmp-place-details size="large"></gmp-place-details>
  • <gmp-place-details size="x-large"></gmp-place-details>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter:
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß-/Kleinschreibung muss beachtet werden.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der Methode „handleEvent“ sein.
  • options:  boolean|AddEventListenerOptions optional Optionen Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert:void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener.
configureFromLocation
configureFromLocation(location)
Parameter: