Klasse BasicPlaceAutocompleteElement
google.maps.places.BasicPlaceAutocompleteElement
Klasse
BasicPlaceAutocompleteElement ist eine HTMLElement-Unterklasse, die eine UI-Komponente für die Places Autocomplete API bereitstellt.
Benutzerdefiniertes Element:
<gmp-basic-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-basic-place-autocomplete>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert BasicPlaceAutocompleteElementOptions.
Zugriff durch Anrufen von const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement(options)Parameter:
|
Attribute | |
|---|---|
includedPrimaryTypes |
Typ:
Array<string> optionalDer 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
|
includedRegionCodes |
Typ:
Array<string> optionalSchließ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
|
locationBias |
Typ:
LocationBias optionalEine weiche Grenze oder ein Hinweis, der bei der Suche nach Orten verwendet werden soll. |
locationRestriction |
Typ:
LocationRestriction optionalGrenzen zum Einschränken von Suchergebnissen. |
name |
Typ:
string optionalDer 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
|
origin |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalDer 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
|
requestedLanguage |
Typ:
string optionalEine 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
|
requestedRegion |
Typ:
string optionalEin 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
|
unitSystem |
Typ:
UnitSystem optionalDas Einheitensystem, das zum Anzeigen von Entfernungen verwendet wird. Wenn nicht angegeben, wird das Einheitensystem durch „requestedRegion“ bestimmt.
HTML-Attribut
|
Slots | |
|---|---|
prediction-item-icon |
In diesem Slot kann genau ein <template>-Element platziert werden, das als Symbol neben dem Vorhersageelement gerendert wird. |
Teile | |
|---|---|
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. |
CSS-Properties | |
|---|---|
background-color |
Überschreibt die Hintergrundfarbe des Elements. |
border |
Überschreibt den Rahmen des Elements. |
border-radius |
Überschreibt den Grenzradius des Elements. |
color-scheme |
Gibt an, in welchem Farbschema dieses Element gerendert werden kann. Weitere Informationen finden Sie in der color-scheme Dokumentation. Die Standardeinstellung ist color-scheme: light dark. |
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
Ereignisse | |
|---|---|
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(placeSelectEvent)Argumente:
Dieses Ereignis wird ausgelöst, wenn ein Nutzer einen Ortsvorschlag auswählt. Enthält ein Place-Objekt. |
BasicPlaceAutocompleteElementOptions Schnittstelle
google.maps.places.BasicPlaceAutocompleteElementOptions-Schnittstelle
Optionen zum Erstellen eines BasicPlaceAutocompleteElement.
Attribute | |
|---|---|
includedPrimaryTypes optional |
Typ:
Array<string> optional |
includedRegionCodes optional |
Typ:
Array<string> optional |
locationBias optional |
Typ:
LocationBias optional |
locationRestriction optional |
Typ:
LocationRestriction optional |
name optional |
Typ:
string optional |
origin optional |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Typ:
string optional |
requestedRegion optional |
Typ:
string optional |
unitSystem optional |
Typ:
UnitSystem optional |
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.
Konstruktor | |
|---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options)Parameter:
|
Attribute | |
|---|---|
includedPrimaryTypes |
Typ:
Array<string> optionalDer 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
|
includedRegionCodes |
Typ:
Array<string> optionalSchließ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
|
locationBias |
Typ:
LocationBias optionalEine weiche Grenze oder ein Hinweis, der bei der Suche nach Orten verwendet werden soll. |
locationRestriction |
Typ:
LocationRestriction optionalGrenzen zum Einschränken von Suchergebnissen. |
name |
Typ:
string optionalDer 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
|
origin |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalDer 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
|
requestedLanguage |
Typ:
string optionalEine 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
|
requestedRegion |
Typ:
string optionalEin 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
|
unitSystem |
Typ:
UnitSystem optionalDas Einheitensystem, das zum Anzeigen von Entfernungen verwendet wird. Wenn nicht angegeben, wird das Einheitensystem durch „requestedRegion“ bestimmt.
HTML-Attribut
|
Slots | |
|---|---|
prediction-item-icon |
In diesem Slot kann genau ein <template>-Element platziert werden, das als Symbol neben dem Vorhersageelement gerendert wird. |
Teile | |
|---|---|
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. |
CSS-Properties | |
|---|---|
background-color |
Überschreibt die Hintergrundfarbe des Elements. |
border |
Überschreibt den Rahmen des Elements. |
border-radius |
Überschreibt den Grenzradius des Elements. |
color-scheme |
Gibt an, in welchem Farbschema dieses Element gerendert werden kann. Weitere Informationen finden Sie in der color-scheme Dokumentation. Die Standardeinstellung ist color-scheme: light dark. |
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
Ereignisse | |
|---|---|
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“.
Attribute | |
|---|---|
includedPrimaryTypes optional |
Typ:
Array<string> optional |
includedRegionCodes optional |
Typ:
Array<string> optional |
locationBias optional |
Typ:
LocationBias optional |
locationRestriction optional |
Typ:
LocationRestriction optional |
name optional |
Typ:
string optional |
origin optional |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Typ:
string optional |
requestedRegion optional |
Typ:
string optional |
unitSystem optional |
Typ:
UnitSystem 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.
Attribute | |
|---|---|
placePrediction |
Typ:
PlacePredictionKonvertieren Sie dies in ein Place, indem Sie PlacePrediction.toPlace aufrufen. |
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.
Konstruktor | |
|---|---|
PlaceContextualElement |
PlaceContextualElement([options])Parameter:
|
Attribute | |
|---|---|
contextToken |
Typ:
string optionalDas Kontext-Token.
HTML-Attribut
|
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt 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.
Attribute | |
|---|---|
contextToken optional |
Typ:
string optionalDas 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 map-mode="none"></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.
Konstruktor | |
|---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options])Parameter:
|
Attribute | |
|---|---|
layout |
Typ:
PlaceContextualListLayout optionalDas Layout.
HTML-Attribut
|
mapHidden |
Typ:
boolean optionalGibt an, ob die Karte ausgeblendet ist.
HTML-Attribut
|
mapMode |
Typ:
PlaceContextualListMapMode optionalDer Kartenmodus, der im kontextbezogenen Element für Orte für eine Liste von Orten verwendet wird.
HTML-Attribut
|
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt 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.
Attribute | |
|---|---|
layout optional |
Typ:
PlaceContextualListLayout optionalStandard:
PlaceContextualListLayout.VERTICALDas Layout. |
mapHidden optional |
Typ:
boolean optionalStandard:
false„True“, wenn die Karte ausgeblendet werden soll. |
mapMode optional |
Typ:
PlaceContextualListMapMode optionalStandard:
PlaceContextualListMapMode.ROADMAPDer Kartenmodus, der im kontextbezogenen Element für Orte für eine Liste von Orten verwendet wird. |
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.
Konstanten | |
|---|---|
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. |
PlaceContextualListMapMode-Konstanten
google.maps.places.PlaceContextualListMapMode
Konstanten
Der Kartenmodus, der im kontextbezogenen Element für Orte für eine Liste von Orten verwendet wird.
Zugriff durch Anrufen von const {PlaceContextualListMapMode} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstanten | |
|---|---|
HYBRID |
Eine transparente Ebene mit Hauptstraßen auf Satelliten- oder fotorealistischen 3D-Bildern. |
NONE |
Keine Karte. |
ROADMAP |
Eine normale 2D-Straßenkarte. |
PlaceDetailsElement-Klasse
google.maps.places.PlaceDetailsElement
Klasse
Zeigt Details zu einem Ort in einem vollständigen Layout an. Hängen Sie entweder PlaceDetailsPlaceRequestElement oder PlaceDetailsLocationRequestElement an, um den Ort anzugeben, der gerendert werden soll. Hängen Sie ein PlaceContentConfigElement, PlaceStandardContentElement oder PlaceAllContentElement an, um anzugeben, welche Inhalte gerendert werden sollen.
Beispiel:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-details> Um dieses Element zu verwenden, müssen Sie die Places UI Kit API für Ihr Projekt in der Google Cloud Console aktivieren.
Benutzerdefiniertes Element:
<gmp-place-details></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.
Konstruktor | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])Parameter:
|
Attribute | |
|---|---|
place |
Typ:
Place optionalSchreibgeschützt. Ortsbezogenes Objekt mit der ID, dem Standort und dem Darstellungsbereich des aktuell gerenderten Orts. |
CSS-Properties | |
|---|---|
--gmp-button-border-color |
Rahmenfarbe der Schaltfläche „In Maps öffnen“. |
--gmp-button-border-radius |
Der Grenzradius der Schaltfläche „In Maps öffnen“. |
--gmp-button-border-width |
Rahmenbreite der Schaltfläche „In Maps öffnen“. |
--gmp-collage-border-radius-outer |
Der Grenzradius der äußeren Ecken der Medienkollage. |
--gmp-dialog-border-radius |
Rahmenradius des Google Maps-Offenlegungsdialogfelds. |
--gmp-mat-color-disabled-surface |
Oberflächenfarbe, die deaktivierte Status oder Nichtvorhandensein vermitteln soll. Wird für leere Rezensionssterne verwendet. |
--gmp-mat-color-info |
Farbe von UI-Elementen mit informativen Inhalten. Wird für das Rollstuhlsymbol verwendet. |
--gmp-mat-color-negative |
Farbe von UI-Elementen mit negativer Stimmung. Wird für den Text „Geschlossen“ im Status „Jetzt geöffnet“ verwendet. |
--gmp-mat-color-neutral-container |
Containerfarbe für neutral gefüllte UI-Elemente. Wird für Bildplatzhalter und das Badge mit dem Veröffentlichungsdatum von Rezensionen verwendet. |
--gmp-mat-color-on-neutral-container |
Farbe von Text und Symbolen im Vergleich zur neutralen Containerfarbe. Wird für das Symbol für das Veröffentlichungsdatum der Rezension und das Symbol für die Verfügbarkeit von Ladestationen für Elektrofahrzeuge verwendet, wenn diese nicht verfügbar sind. |
--gmp-mat-color-on-positive-container |
Farbe von Texten und Symbolen im Vergleich zur positiven Containerfarbe. Wird für das Verfügbarkeitssymbol für Ladegeräte für Elektrofahrzeuge verwendet, sofern verfügbar. |
--gmp-mat-color-on-secondary-container |
Farbe von Text und Symbolen im Verhältnis zur sekundären Containerfarbe. Wird für Text und Symbole auf der Schaltfläche „In Maps öffnen“ verwendet. |
--gmp-mat-color-on-surface |
Farbe für Text und Symbole vor einer beliebigen Oberflächenfarbe. Wird für normalen Text verwendet. |
--gmp-mat-color-on-surface-variant |
Farbe mit geringerer Gewichtung für Text und Symbole auf einer beliebigen Oberflächenfarbe. Wird für weniger betonte Texte verwendet. |
--gmp-mat-color-outline-decorative |
Konturfarbe nicht interaktiver Elemente. Wird für den Rahmen des Elements verwendet. |
--gmp-mat-color-positive |
Farbe von UI-Elementen mit positiver Stimmung. Wird für den Text „Geöffnet“ im Status „Jetzt geöffnet“ verwendet. |
--gmp-mat-color-positive-container |
Containerfarbe für UI-Elemente, die eine positive Stimmung vermitteln. Wird für das Verfügbarkeitssymbol für Ladegeräte für Elektrofahrzeuge verwendet, sofern verfügbar. |
--gmp-mat-color-primary |
Farbe von interaktivem Text und Symbolen im Verhältnis zur Oberflächenfarbe. Wird für die Anzahl der Rezensionen, Links im Offenlegungsdialog von Google Maps, Website-Links, Symbole auf dem Tab „Übersicht“ und (Hover-/Fokus-/Textfarbe) für Tab-Leistentitel verwendet. |
--gmp-mat-color-secondary-container |
Weniger auffällige Füllfarbe für untergeordnete Komponenten wie tonale Schaltflächen. Wird für den Hintergrund der Schaltfläche „In Maps öffnen“ verwendet. |
--gmp-mat-color-surface |
Farbe für Hintergründe. Wird für die Hintergründe des Elements und des Offenlegungsdialogs von Google Maps verwendet. |
--gmp-mat-font-body-medium |
Wird für die Ortsadresse, die Bewertung, den Typ, den Preis, den Status „Jetzt geöffnet“, die Öffnungszeiten, die Rezension, die Telefonnummer, die Website, den Plus Code, die wichtigsten Funktionen und den Haupttext im Offenlegungsdialog von Google Maps verwendet. |
--gmp-mat-font-body-small |
Wird für den Haupttext in der Funktionsliste auf dem Tab „Über“ verwendet. |
--gmp-mat-font-display-small |
Wird für den Ortsnamen und den Text für jede Überschrift auf dem Tab „Info“ verwendet. |
--gmp-mat-font-family |
Die für den gesamten Text verwendete Basisschriftfamilie. |
--gmp-mat-font-headline-medium |
Wird für Überschriften im Offenlegungsdialogfeld von Google Maps verwendet. |
--gmp-mat-font-label-large |
Wird für die Tabtitel, die Schaltfläche „In Google Maps öffnen“, den Quellenangabetext für Rezensenten in der Fotogalerie, den Quellenangabetext für Rezensenten im Rezensionsbereich und Links im Offenlegungsdialogfeld von Google Maps verwendet. |
--gmp-mat-font-label-medium |
Wird für das Fotos-Badge und das Badge mit dem Veröffentlichungsdatum der Rezension verwendet. |
--gmp-mat-font-title-small |
Wird für den Titel der einzelnen Abschnitte auf dem Tab „Info“ verwendet. |
--gmp-mat-spacing-extra-large |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-extra-small |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-large |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-medium |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-small |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-two-extra-large |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-star-rating-color |
Farbe der ausgefüllten Sterne in der Bewertung. |
background-color |
Überschreibt die Hintergrundfarbe des Elements. |
border |
Überschreibt den Rahmen des Elements. |
border-radius |
Überschreibt den Grenzradius des Elements. |
color-scheme |
Gibt an, in welchem Farbschema dieses Element gerendert werden kann. Weitere Informationen finden Sie in der color-scheme Dokumentation. Die Standardeinstellung ist color-scheme: light dark. |
font-size |
Skaliert den gesamten Text und alle Symbole im Element, die intern in „ems“ definiert sind. Die Standardeinstellung ist 16px. |
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
Ereignisse | |
|---|---|
gmp-error |
function(event)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-load |
function(event)Argumente:
Dieses Ereignis wird ausgelöst, wenn das Element geladen und sein Inhalt gerendert wird. Dieses Ereignis wird nicht weitergegeben. |
PlaceDetailsElementOptions-Schnittstelle
google.maps.places.PlaceDetailsElementOptions-Schnittstelle
Optionen für PlaceDetailsElement.
PlaceDetailsCompactElement-Klasse
google.maps.places.PlaceDetailsCompactElement
Klasse
Zeigt Details zu einem Ort in einem kompakten Layout an. Hängen Sie ein PlaceDetailsPlaceRequestElement oder PlaceDetailsLocationRequestElement an, um den Ort anzugeben, der gerendert werden soll. Hängen Sie ein PlaceContentConfigElement, PlaceStandardContentElement oder PlaceAllContentElement an, um anzugeben, welche Inhalte gerendert werden sollen.
Beispiel:
<gmp-place-details-compact>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-details-compact> Um dieses Element zu verwenden, müssen Sie die Places UI Kit API für Ihr Projekt in der Google Cloud Console aktivieren.
Benutzerdefiniertes Element:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert PlaceDetailsCompactElementOptions.
Zugriff durch Anrufen von const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options])Parameter:
|
Attribute | |
|---|---|
orientation |
Typ:
PlaceDetailsOrientation optionalStandard:
PlaceDetailsOrientation.VERTICALDie Ausrichtungsvariante (vertikal oder horizontal) des Elements.
HTML-Attribut
|
place |
Typ:
Place optionalSchreibgeschützt. Ortsbezogenes Objekt mit der ID, dem Standort und dem Darstellungsbereich des aktuell gerenderten Orts. |
truncationPreferred |
Typ:
booleanStandard:
falseWenn „true“ festgelegt ist, werden der Ortsname und die Adresse so gekürzt, dass sie in eine Zeile passen, anstatt umgebrochen zu werden.
HTML-Attribut
|
CSS-Properties | |
|---|---|
--gmp-button-border-color |
Rahmenfarbe der Schaltfläche „In Maps öffnen“. |
--gmp-button-border-radius |
Der Grenzradius der Schaltfläche „In Maps öffnen“. |
--gmp-button-border-width |
Rahmenbreite der Schaltfläche „In Maps öffnen“. |
--gmp-dialog-border-radius |
Rahmenradius des Google Maps-Offenlegungsdialogfelds. |
--gmp-mat-color-info |
Farbe von UI-Elementen mit informativen Inhalten. Wird für das Rollstuhlsymbol verwendet. |
--gmp-mat-color-negative |
Farbe von UI-Elementen mit negativer Stimmung. Wird für den Text „Geschlossen“ im Status „Jetzt geöffnet“ verwendet. |
--gmp-mat-color-neutral-container |
Containerfarbe für neutral gefüllte UI-Elemente. Wird für Bildplatzhalter verwendet. |
--gmp-mat-color-on-secondary-container |
Farbe von Text und Symbolen im Verhältnis zur sekundären Containerfarbe. Wird für Text und Symbole auf der Schaltfläche „In Maps öffnen“ verwendet. |
--gmp-mat-color-on-surface |
Farbe für Text und Symbole vor einer beliebigen Oberflächenfarbe. Wird für normalen Text verwendet. |
--gmp-mat-color-on-surface-variant |
Farbe mit geringerer Gewichtung für Text und Symbole auf einer beliebigen Oberflächenfarbe. Wird für weniger betonte Texte verwendet. |
--gmp-mat-color-outline-decorative |
Konturfarbe nicht interaktiver Elemente. Wird für den Rahmen des Elements verwendet. |
--gmp-mat-color-positive |
Farbe von UI-Elementen mit positiver Stimmung. Wird für den Text „Geöffnet“ im Status „Jetzt geöffnet“ verwendet. |
--gmp-mat-color-primary |
Farbe von interaktivem Text und Symbolen im Verhältnis zur Oberflächenfarbe. Wird für die Anzahl der Rezensionen sowie für Links im Offenlegungsdialog von Google Maps verwendet. |
--gmp-mat-color-secondary-container |
Weniger auffällige Füllfarbe für untergeordnete Komponenten wie tonale Schaltflächen. Wird für den Hintergrund der Schaltfläche „In Maps öffnen“ verwendet. |
--gmp-mat-color-surface |
Farbe für Hintergründe. Wird für die Hintergründe des Elements und des Offenlegungsdialogs von Google Maps verwendet. |
--gmp-mat-font-body-medium |
Wird für den Haupttext im Offenlegungsdialogfeld von Google Maps verwendet. |
--gmp-mat-font-body-small |
Wird für die Adresse, Bewertung, Art, den Preis und den Status „Jetzt geöffnet“ des Orts verwendet. |
--gmp-mat-font-family |
Die für den gesamten Text verwendete Basisschriftfamilie. |
--gmp-mat-font-headline-medium |
Wird für Überschriften im Offenlegungsdialogfeld von Google Maps verwendet. |
--gmp-mat-font-label-large |
Wird für die Schaltfläche „In Maps öffnen“ sowie für Links im Offenlegungsdialog von Google Maps und für den Text zur Quellenangabe des Rezensenten in der Fotogalerie verwendet. |
--gmp-mat-font-label-medium |
Wird für das Fotos-Zähler-Badge verwendet. |
--gmp-mat-font-title-small |
Wird für den Ortsnamen verwendet. |
--gmp-mat-spacing-extra-small |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-large |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-medium |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-small |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-star-rating-color |
Farbe der ausgefüllten Sterne in der Bewertung. |
--gmp-thumbnail-border-radius |
Der Grenzradius des Miniaturbilds des Orts. |
background-color |
Überschreibt die Hintergrundfarbe des Elements. |
border |
Überschreibt den Rahmen des Elements. |
border-radius |
Überschreibt den Grenzradius des Elements. |
color-scheme |
Gibt an, in welchem Farbschema dieses Element gerendert werden kann. Weitere Informationen finden Sie in der color-scheme Dokumentation. Die Standardeinstellung ist color-scheme: light dark. |
font-size |
Skaliert den gesamten Text und alle Symbole im Element, die intern in „ems“ definiert sind. Die Standardeinstellung ist 16px. |
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
Ereignisse | |
|---|---|
gmp-error |
function(event)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-load |
function(event)Argumente:
Dieses Ereignis wird ausgelöst, wenn das Element geladen und sein Inhalt gerendert wird. Dieses Ereignis wird nicht weitergegeben. |
PlaceDetailsCompactElementOptions-Schnittstelle
google.maps.places.PlaceDetailsCompactElementOptions-Schnittstelle
Optionen für PlaceDetailsCompactElement.
Attribute | |
|---|---|
orientation optional |
Typ:
PlaceDetailsOrientation optional |
truncationPreferred optional |
Typ:
boolean optional |
PlaceDetailsOrientation-Konstanten
google.maps.places.PlaceDetailsOrientation
Konstanten
Ausrichtungsvarianten für PlaceDetailsCompactElement.
Zugriff durch Anrufen von const {PlaceDetailsOrientation} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstanten | |
|---|---|
HORIZONTAL |
Horizontale Ausrichtung. |
VERTICAL |
Vertikale Ausrichtung. |
PlaceDetailsPlaceRequestElement-Klasse
google.maps.places.PlaceDetailsPlaceRequestElement
Klasse
Konfiguriert ein PlaceDetailsCompactElement oder PlaceDetailsElement, um Daten basierend auf einem Orts-Objekt, einer ID oder einem Ressourcennamen zu laden. Hängen Sie dieses Element als untergeordnetes Element von PlaceDetailsCompactElement oder PlaceDetailsElement an, um Daten für den angegebenen Ort zu laden. Beispiel:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
</gmp-place-details> Benutzerdefiniertes Element:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert PlaceDetailsPlaceRequestElementOptions.
Zugriff durch Anrufen von const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options])Parameter:
|
Attribute | |
|---|---|
place |
Typ:
Place optionalStandard:
nullDas Ortsobjekt, die ID oder der Ressourcenname, für die Details im kompakten Element „Ortsdetails“ gerendert werden sollen. Dieses Attribut entspricht dem Attribut als Ressourcenname.
HTML-Attribut
|
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
PlaceDetailsPlaceRequestElementOptions Schnittstelle
google.maps.places.PlaceDetailsPlaceRequestElementOptions-Schnittstelle
Optionen für PlaceDetailsPlaceRequestElement.
Attribute | |
|---|---|
place optional |
Typ:
Place|string optional |
PlaceDetailsLocationRequestElement-Klasse
google.maps.places.PlaceDetailsLocationRequestElement
Klasse
Konfiguriert eine PlaceDetailsCompactElement oder PlaceDetailsElement, um Daten basierend auf einem Standort zu laden. Hängen Sie dieses Element als untergeordnetes Element von PlaceDetailsCompactElement oder PlaceDetailsElement an, um Daten für den angegebenen Standort zu laden. Beispiel:
<gmp-place-details>
<gmp-place-details-location-request
location="37.6207665,-122.4284806"
></gmp-place-details-location-request>
</gmp-place-details> Benutzerdefiniertes Element:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert PlaceDetailsLocationRequestElementOptions.
Zugriff durch Anrufen von const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options])Parameter:
|
Attribute | |
|---|---|
location |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalStandard:
nullDer Ort, für den Details im Element „Place Details“ gerendert werden sollen. Normalisiert auf ein
LatLngAltitude.HTML-Attribut
|
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
PlaceDetailsLocationRequestElementOptions-Schnittstelle
google.maps.places.PlaceDetailsLocationRequestElementOptions-Schnittstelle
Optionen für PlaceDetailsLocationRequestElement.
Attribute | |
|---|---|
location optional |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalDer Ort, an dem der Ort gerendert werden soll. |
Klasse PlaceSearchElement
google.maps.places.PlaceSearchElement
Klasse
Zeigt die Ergebnisse einer Ortssuche in einer Liste an. Hängen Sie ein PlaceTextSearchRequestElement oder PlaceNearbySearchRequestElement an, um die Anfrage anzugeben, für die Ergebnisse gerendert werden sollen. Hängen Sie ein PlaceContentConfigElement, PlaceStandardContentElement oder PlaceAllContentElement an, um anzugeben, welche Inhalte gerendert werden sollen.
Beispiel:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> Wenn Sie das Place Search Element verwenden möchten, aktivieren Sie die Places UI Kit API für Ihr Projekt in der Google Cloud Console.
Benutzerdefiniertes Element:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert PlaceSearchElementOptions.
Zugriff durch Anrufen von const {PlaceSearchElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
PlaceSearchElement |
PlaceSearchElement([options])Parameter:
|
Attribute | |
|---|---|
attributionPosition |
Typ:
PlaceSearchAttributionPosition optionalStandard:
PlaceSearchAttributionPosition.TOPDie Position des Attributionslogos und der Schaltfläche für die rechtliche Offenlegung.
HTML-Attribut
|
orientation |
Typ:
PlaceSearchOrientation optionalStandard:
PlaceSearchOrientation.VERTICALDie Ausrichtungsvariante (vertikal oder horizontal) des Elements.
HTML-Attribut
|
places |
Schreibgeschützt. Array mit Place-Objekten, die die IDs, Standorte und Viewports der aktuell gerenderten Orte enthalten. |
selectable |
Typ:
boolean optionalStandard:
falseGibt an, ob die Listenelemente ausgewählt werden können. Bei „true“ sind die Listenelemente Schaltflächen, die bei einem Klick das
gmp-select-Ereignis auslösen. Die barrierefreie Tastaturnavigation und ‑auswahl wird ebenfalls unterstützt.HTML-Attribut
|
truncationPreferred |
Typ:
boolean optionalStandard:
falseWenn „true“ festgelegt ist, werden bestimmte Inhaltszeilen gekürzt, damit sie in eine Zeile passen, anstatt umgebrochen zu werden.
HTML-Attribut
|
CSS-Properties | |
|---|---|
--gmp-button-border-color |
Rahmenfarbe für die Schaltfläche „In Maps öffnen“. |
--gmp-button-border-radius |
Rahmenradius für die Schaltfläche „In Maps öffnen“. |
--gmp-button-border-width |
Rahmenbreite für die Schaltfläche „In Maps öffnen“. |
--gmp-card-border-radius |
Der Grenzradius für Ortskarten. |
--gmp-dialog-border-radius |
Rahmenradius für das Google Maps-Offenlegungsdialogfeld. |
--gmp-mat-color-info |
Farbe von UI-Elementen mit informativen Inhalten. Wird für das Symbol für den barrierefreien Eingang verwendet. |
--gmp-mat-color-negative |
Farbe von UI-Elementen mit negativer Stimmung. Wird für das Label „Geschlossen“ für die Öffnungszeiten eines Orts verwendet. |
--gmp-mat-color-neutral-container |
Containerfarbe für neutral gefüllte UI-Elemente. Wird für die Badges mit dem Überprüfungsdatum und zum Laden von Platzhalterformen verwendet. |
--gmp-mat-color-on-neutral-container |
Farbe von Text und Symbolen in einem neutralen Container. Wird für den Text des Überprüfungsdatums und den Text für Ladefehler verwendet. |
--gmp-mat-color-on-secondary-container |
Farbe von Text und Symbolen im Verhältnis zu einer sekundären Containerfarbe. Wird für Schaltflächentext und ‑symbole verwendet. |
--gmp-mat-color-on-surface |
Farbe für Text und Symbole vor einer Oberflächenfarbe. Wird für Überschriften und Dialoginhalte verwendet. |
--gmp-mat-color-on-surface-variant |
Farbe mit geringerer Gewichtung für Text und Symbole vor einer Oberflächenfarbe. Wird für Ortsinformationen verwendet. |
--gmp-mat-color-outline-decorative |
Konturfarbe nicht interaktiver Elemente. Wird für den Containerrahmen verwendet. |
--gmp-mat-color-positive |
Farbe von UI-Elementen mit positiver Stimmung. Wird für das Label „Geöffnet“ für die Öffnungszeiten eines Orts verwendet. |
--gmp-mat-color-primary |
Farbe von interaktivem Text und Symbolen im Verhältnis zur Oberflächenfarbe. Wird für Links, Ladeanzeigen und Übersichtssymbole verwendet. |
--gmp-mat-color-secondary-container |
Weniger auffällige Füllfarbe auf einer Oberfläche. Wird für Schaltflächenhintergründe verwendet. |
--gmp-mat-color-surface |
Farbe für Hintergründe. Wird für Container- und Dialoghintergründe verwendet. |
--gmp-mat-font-body-small |
Wird für Ortsinformationen verwendet. |
--gmp-mat-font-family |
Basisschriftfamilie für den gesamten Text. |
--gmp-mat-font-headline-medium |
Wird für Dialogüberschriften verwendet. |
--gmp-mat-font-label-large |
Wird für Schaltflächeninhalte verwendet. |
--gmp-mat-font-title-medium |
Wird für den Ortsnamen verwendet. |
--gmp-mat-spacing-extra-small |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-large |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-medium |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-mat-spacing-small |
Wird für den Abstand innerhalb des Elements verwendet, z. B. für den Rand und den Innenabstand um Text. |
--gmp-star-rating-color |
Farbe der gefüllten Sterne in einer Sternebewertung. |
--gmp-thumbnail-border-radius |
Der Grenzradius für das Orts-Thumbnailbild. |
background-color |
Überschreibt die Hintergrundfarbe des Elements. |
border |
Überschreibt den Rahmen des Elements. |
border-radius |
Überschreibt den Grenzradius des Elements. |
color-scheme |
Gibt an, in welchem Farbschema dieses Element gerendert werden kann. Weitere Informationen finden Sie in der color-scheme Dokumentation. Die Standardeinstellung ist color-scheme: light dark. |
font-size |
Skaliert den gesamten Text und alle Symbole im Element. Die Standardeinstellung ist 16px. |
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
Ereignisse | |
|---|---|
gmp-error |
function(event)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-load |
function(event)Argumente:
Dieses Ereignis wird ausgelöst, wenn das Element geladen und sein Inhalt gerendert wird. Dieses Ereignis wird nicht weitergegeben. |
gmp-select |
function(event)Argumente:
Dieses Ereignis wird ausgelöst, wenn ein Ort aus der Liste ausgewählt wird. Enthält ein Place-Objekt mit der ID, dem Standort und dem Viewport des ausgewählten Orts. |
PlaceSearchElementOptions Schnittstelle
google.maps.places.PlaceSearchElementOptions-Schnittstelle
Optionen für PlaceSearchElement.
Attribute | |
|---|---|
attributionPosition optional |
Typ:
PlaceSearchAttributionPosition optional |
orientation optional |
Typ:
PlaceSearchOrientation optionalPlaceSearchElement.orientation ansehen. |
selectable optional |
Typ:
boolean optionalPlaceSearchElement.selectable ansehen |
truncationPreferred optional |
Typ:
boolean optional |
PlaceSearchAttributionPosition-Konstanten
google.maps.places.PlaceSearchAttributionPosition
Konstanten
Positionen der Quellenangaben für PlaceSearchElement.
Zugriff durch Anrufen von const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstanten | |
|---|---|
BOTTOM |
Attribution unten im PlaceSearchElement |
TOP |
Attribution oben im PlaceSearchElement |
PlaceSearchOrientation-Konstanten
google.maps.places.PlaceSearchOrientation
Konstanten
Ausrichtungsvarianten für PlaceSearchElement.
Zugriff durch Anrufen von const {PlaceSearchOrientation} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstanten | |
|---|---|
HORIZONTAL |
Horizontale Ausrichtung. |
VERTICAL |
Vertikale Ausrichtung. |
Klasse PlaceSelectEvent
google.maps.places.PlaceSelectEvent
Klasse
Dieses Ereignis wird ausgelöst, wenn ein Ort aus einer Liste von Orten ausgewählt wird. Greifen Sie mit event.place auf die Auswahl zu.
Diese Klasse erweitert Event.
Zugriff durch Anrufen von const {PlaceSelectEvent} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Attribute | |
|---|---|
place |
Typ:
PlaceDer ausgewählte Ort. |
Klasse PlaceNearbySearchRequestElement
google.maps.places.PlaceNearbySearchRequestElement
Klasse
Konfiguriert ein PlaceSearchElement, um Ergebnisse basierend auf einer Anfrage für die Suche in der Nähe zu laden. Die Property locationRestriction ist erforderlich, damit das Suchelement geladen werden kann. Alle anderen konfigurierten Attribute werden ignoriert, wenn locationRestriction nicht festgelegt ist. Hängen Sie dieses Element als untergeordnetes Element von PlaceSearchElement an, um Ergebnisse zu laden. Beispiel:
<gmp-place-search>
<gmp-place-nearby-search-request
location-restriction="RADIUS@LAT,LNG"
></gmp-place-nearby-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> Benutzerdefiniertes Element:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert PlaceNearbySearchRequestElementOptions.
Zugriff durch Anrufen von const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options])Parameter:
|
Attribute | |
|---|---|
excludedPrimaryTypes |
Typ:
Array<string> optionalStandard:
nullHTML-Attribut
|
excludedTypes |
Typ:
Array<string> optionalStandard:
nullHTML-Attribut
|
includedPrimaryTypes |
Typ:
Array<string> optionalStandard:
nullHTML-Attribut
|
includedTypes |
Typ:
Array<string> optionalStandard:
nullHTML-Attribut
|
locationRestriction |
Typ:
Circle|CircleLiteral optionalStandard:
nullHTML-Attribut
|
maxResultCount |
Typ:
number optionalStandard:
nullHTML-Attribut
|
rankPreference |
Typ:
SearchNearbyRankPreference optionalStandard:
nullHTML-Attribut
|
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
PlaceNearbySearchRequestElementOptions Schnittstelle
google.maps.places.PlaceNearbySearchRequestElementOptions-Schnittstelle
Optionen für PlaceNearbySearchRequestElement.
Attribute | |
|---|---|
excludedPrimaryTypes optional |
Typ:
Array<string> optionalAusgeschlossene primäre Ortstypen. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.excludedPrimaryTypes und SearchNearbyRequest.excludedPrimaryTypes. |
excludedTypes optional |
Typ:
Array<string> optionalAusgeschlossene Ortstypen. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.excludedTypes und SearchNearbyRequest.excludedTypes. |
includedPrimaryTypes optional |
Typ:
Array<string> optionalBerücksichtigte primäre Ortstypen. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.includedPrimaryTypes und SearchNearbyRequest.includedPrimaryTypes. |
includedTypes optional |
Typ:
Array<string> optionalBerücksichtigte Ortstypen. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.includedTypes und SearchNearbyRequest.includedTypes. |
locationRestriction optional |
Typ:
Circle|CircleLiteral optionalDie Region, in der gesucht werden soll. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.locationRestriction und SearchNearbyRequest.locationRestriction. |
maxResultCount optional |
Typ:
number optionalMaximale Anzahl der zurückzugebenden Ergebnisse. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.maxResultCount und SearchNearbyRequest.maxResultCount. |
rankPreference optional |
Typ:
SearchNearbyRankPreference optionalSo werden die Ergebnisse in der Antwort sortiert. Weitere Informationen finden Sie unter PlaceNearbySearchRequestElement.rankPreference und SearchNearbyRankPreference. |
Klasse PlaceTextSearchRequestElement
google.maps.places.PlaceTextSearchRequestElement
Klasse
Konfiguriert ein PlaceSearchElement, um Ergebnisse basierend auf einer Textsuchanfrage zu laden. Die Property textQuery ist erforderlich, damit das Suchelement geladen werden kann. Alle anderen konfigurierten Attribute werden ignoriert, wenn textQuery nicht festgelegt ist. Hängen Sie dieses Element als untergeordnetes Element von PlaceSearchElement an, um Ergebnisse zu laden. Beispiel:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> Benutzerdefiniertes Element:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>
Diese Klasse erweitert HTMLElement.
Diese Klasse implementiert PlaceTextSearchRequestElementOptions.
Zugriff durch Anrufen von const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options])Parameter:
|
Attribute | |
|---|---|
evConnectorTypes |
Typ:
Array<EVConnectorType> optionalStandard:
nullHTML-Attribut
|
evMinimumChargingRateKw |
Typ:
number optionalStandard:
nullHTML-Attribut
|
includedType |
Typ:
string optionalStandard:
nullHTML-Attribut
|
isOpenNow |
Typ:
boolean optionalStandard:
nullHTML-Attribut
|
locationBias |
Typ:
string|LatLngAltitude|LatLngBounds|Circle|LatLng|LatLngLiteral|LatLngAltitudeLiteral|LatLngBoundsLiteral|CircleLiteral optionalStandard:
nullHTML-Attribut
|
locationRestriction |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalStandard:
nullHTML-Attribut
|
maxResultCount |
Typ:
number optionalStandard:
nullHTML-Attribut
|
minRating |
Typ:
number optionalStandard:
nullHTML-Attribut
|
priceLevels |
Typ:
Array<PriceLevel> optionalStandard:
nullHTML-Attribut
|
rankPreference |
Typ:
SearchByTextRankPreference optionalStandard:
nullHTML-Attribut
|
textQuery |
Typ:
string optionalStandard:
nullHTML-Attribut
|
useStrictTypeFiltering |
Typ:
boolean optionalStandard:
nullHTML-Attribut
|
Methoden | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidRichtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parameter:
Rückgabewert:
voidEntfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener. |
PlaceTextSearchRequestElementOptions-Schnittstelle
google.maps.places.PlaceTextSearchRequestElementOptions-Schnittstelle
Optionen für PlaceTextSearchRequestElement.
Attribute | |
|---|---|
evConnectorTypes optional |
Typ:
Array<EVConnectorType> optionalDie Liste der bevorzugten Ladesteckertypen für Elektrofahrzeuge. Weitere Informationen finden Sie unter SearchByTextRequest.evSearchOptions und PlaceTextSearchRequestElement.evConnectorTypes. |
evMinimumChargingRateKw optional |
Typ:
number optionalDie erforderliche Mindestladegeschwindigkeit in Kilowatt. Weitere Informationen finden Sie unter SearchByTextRequest.evSearchOptions und PlaceTextSearchRequestElement.evMinimumChargingRateKw. |
includedType optional |
Typ:
string optionalDer angeforderte Ortstyp. Weitere Informationen finden Sie unter SearchByTextRequest.includedType und PlaceTextSearchRequestElement.includedType. |
isOpenNow optional |
Typ:
boolean optionalWird verwendet, um die Suche auf Orte zu beschränken, die derzeit geöffnet sind. Weitere Informationen finden Sie unter SearchByTextRequest.isOpenNow und PlaceTextSearchRequestElement.isOpenNow. |
locationBias optional |
Typ:
string|LatLngAltitude|LatLngBounds|Circle|LatLng|LatLngLiteral|LatLngAltitudeLiteral|LatLngBoundsLiteral|CircleLiteral optionalStandortgewichtung für die Suche. Weitere Informationen finden Sie unter SearchByTextRequest.locationBias und PlaceTextSearchRequestElement.locationBias. |
locationRestriction optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalStandortbeschränkung für die Suche. Weitere Informationen finden Sie unter SearchByTextRequest.locationRestriction und PlaceTextSearchRequestElement.locationRestriction. |
maxResultCount optional |
Typ:
number optionalMaximale Anzahl der zurückzugebenden Ergebnisse. Weitere Informationen finden Sie unter SearchByTextRequest.maxResultCount und PlaceTextSearchRequestElement.maxResultCount. |
minRating optional |
Typ:
number optionalErgebnisse herausfiltern, deren durchschnittliche Nutzerbewertung streng unter diesem Grenzwert liegt. Weitere Informationen finden Sie unter SearchByTextRequest.minRating und PlaceTextSearchRequestElement.minRating. |
priceLevels optional |
Typ:
Array<PriceLevel> optionalWird verwendet, um die Suche auf Orte mit bestimmten Preisniveaus zu beschränken. Weitere Informationen finden Sie unter SearchByTextRequest.priceLevels und PlaceTextSearchRequestElement.priceLevels. |
rankPreference optional |
Typ:
SearchByTextRankPreference optionalSo werden die Ergebnisse in der Antwort sortiert. Weitere Informationen finden Sie unter SearchByTextRequest.rankPreference und PlaceTextSearchRequestElement.rankPreference. |
textQuery optional |
Typ:
string optionalDie Textanfrage für die textbasierte Suche. Weitere Informationen finden Sie unter SearchByTextRequest.textQuery und PlaceTextSearchRequestElement.textQuery. |
useStrictTypeFiltering optional |
Typ:
boolean optionalWird verwendet, um die strenge Typfilterung für SearchByTextRequest.includedType festzulegen. Weitere Informationen finden Sie unter SearchByTextRequest.useStrictTypeFiltering und PlaceTextSearchRequestElement.useStrictTypeFiltering. |
Autocomplete-Klasse
google.maps.places.Autocomplete
Klasse
Ein Widget, das Ortsvorschläge basierend auf der Texteingabe eines Nutzers liefert. Es wird an ein Eingabeelement vom Typ text angehängt und überwacht dieses Feld auf Texteingaben. Die Liste der Vorschläge wird als Drop-down-Liste angezeigt und aktualisiert, sobald Text eingegeben wird.
Diese Klasse erweitert MVCObject.
Zugriff durch Anrufen von const {Autocomplete} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
Autocomplete |
Autocomplete(inputField[, opts])Parameter:
Erstellt eine neue Instanz von Autocomplete, die mit den angegebenen Optionen an das angegebene Eingabefeld angehängt wird. |
Methoden | |
|---|---|
getBounds |
getBounds()Parameter:Keine
Rückgabewert:
LatLngBounds|undefined Die Bias-Grenzwerte.Gibt die Grenzen zurück, auf die Vorhersagen ausgerichtet sind. |
getFields |
getFields()Parameter:Keine
Rückgabewert:
Array<string>|undefinedGibt die Felder zurück, die für den Ort in der Detailantwort enthalten sein sollen, wenn die Details erfolgreich abgerufen wurden. Eine Liste der Felder finden Sie unter PlaceResult. |
getPlace |
getPlace()Parameter:Keine
Rückgabewert:
PlaceResult Der vom Nutzer ausgewählte Ort.Gibt die Details des vom Nutzer ausgewählten Orts zurück, wenn die Details abgerufen wurden. Andernfalls wird ein Platzhalterobjekt vom Typ „Place“ zurückgegeben, wobei die name-Property auf den aktuellen Wert des Eingabefelds festgelegt ist. |
setBounds |
setBounds(bounds)Parameter:
Rückgabewert:Keiner
Legt den bevorzugten Bereich fest, in dem Orts-Ergebnisse zurückgegeben werden sollen. Bei den Ergebnissen werden Orte in diesem Gebiet bevorzugt, es werden jedoch nicht nur Orte gefunden. |
setComponentRestrictions |
setComponentRestrictions(restrictions)Parameter:
Rückgabewert:Keiner
Legt die Einschränkungen für die Komponente fest. Mit Komponentenbeschränkungen werden Vorhersagen auf die übergeordnete Komponente beschränkt. Zum Beispiel das Land. |
setFields |
setFields(fields)Parameter:
Rückgabewert:Keiner
Legt die Felder fest, die für den Ort in der Detailantwort enthalten sein sollen, wenn die Details erfolgreich abgerufen wurden. Eine Liste der Felder finden Sie unter PlaceResult. |
setOptions |
setOptions(options)Parameter:
Rückgabewert:Keiner
|
setTypes |
setTypes(types)Parameter:
Rückgabewert:Keiner
Legt die Arten von Vorhersagen fest, die zurückgegeben werden sollen. Informationen zu den unterstützten Typen finden Sie im Entwicklerhandbuch. Wenn keine Typen angegeben sind, werden alle Typen zurückgegeben. |
Geerbt:addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Ereignisse | |
|---|---|
place_changed |
function()Argumente:Keine
Dieses Ereignis wird ausgelöst, wenn ein PlaceResult für einen vom Nutzer ausgewählten Ort verfügbar gemacht wird. Wenn der Nutzer den Namen eines Orts eingibt, der nicht von der Steuerung vorgeschlagen wurde, und die Eingabetaste drückt oder eine Place Details-Anfrage fehlschlägt, enthält PlaceResult die Nutzereingabe in der Eigenschaft name, ohne dass andere Eigenschaften definiert sind. |
AutocompleteOptions-Schnittstelle
google.maps.places.AutocompleteOptions-Schnittstelle
Die Optionen, die für ein Autocomplete-Objekt festgelegt werden können.
Attribute | |
|---|---|
bounds optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalDas Gebiet, in dem nach Orten gesucht werden soll. |
componentRestrictions optional |
Typ:
ComponentRestrictions optionalDie Einschränkungen für die Komponente. Mit Komponentenbeschränkungen werden Vorhersagen auf die übergeordnete Komponente beschränkt. Zum Beispiel das Land. |
fields optional |
Typ:
Array<string> optionalFelder, die in der Detailantwort für den Ort enthalten sein sollen, wenn die Details erfolgreich abgerufen wurden. Diese werden in Rechnung gestellt. Wenn ['ALL'] übergeben wird, werden alle verfügbaren Felder zurückgegeben und in Rechnung gestellt. Bei Produktions-Deployments wird hiervon abgeraten. Eine Liste der Felder finden Sie unter PlaceResult. Verschachtelte Felder können mit Punktpfaden angegeben werden (z. B. "geometry.location"). Der Standardwert ist ['ALL']. |
|
Typ:
boolean optionalGibt an, ob nur Orts-IDs abgerufen werden sollen. Das PlaceResult, das beim Auslösen des place_changed-Ereignisses verfügbar gemacht wird, enthält nur die Felder „place_id“, „types“ und „name“ mit den von Autocomplete zurückgegebenen „place_id“, „types“ und „description“. Standardmäßig deaktiviert. |
strictBounds optional |
Typ:
boolean optionalEin boolescher Wert, der angibt, dass das Autocomplete-Widget nur die Orte zurückgeben soll, die sich beim Senden der Anfrage innerhalb der Grenzen des Autocomplete-Widgets befinden. Wenn Sie „strictBounds“ auf false (Standardeinstellung) festlegen, werden Orte innerhalb des Gebiets bevorzugt, es werden jedoch nicht nur Orte gefunden. |
types optional |
Typ:
Array<string> optionalDie Arten von Vorhersagen, die zurückgegeben werden sollen. Informationen zu den unterstützten Typen finden Sie im Entwicklerhandbuch. Wenn keine Typen angegeben sind, werden alle Typen zurückgegeben. |
SearchBox-Klasse
google.maps.places.SearchBox
Klasse
Ein Widget, das basierend auf der Texteingabe eines Nutzers Vorschläge für Suchanfragen liefert. Es wird an ein Eingabeelement vom Typ text angehängt und überwacht dieses Feld auf Texteingaben. Die Liste der Vorschläge wird als Drop-down-Liste angezeigt und aktualisiert, sobald Text eingegeben wird.
Diese Klasse erweitert MVCObject.
Zugriff durch Anrufen von const {SearchBox} = await google.maps.importLibrary("places").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Konstruktor | |
|---|---|
SearchBox |
SearchBox(inputField[, opts])Parameter:
Erstellt eine neue Instanz von SearchBox, die mit den angegebenen Optionen an das angegebene Eingabefeld angehängt wird. |
Methoden | |
|---|---|
getBounds |
getBounds()Parameter:Keine
Rückgabewert:
LatLngBounds|undefinedGibt die Grenzen zurück, auf die Abfragevorhersagen ausgerichtet sind. |
getPlaces |
getPlaces()Parameter:Keine
Rückgabewert:
Array<PlaceResult>|undefinedGibt die vom Nutzer ausgewählte Abfrage zurück, die mit dem places_changed-Ereignis verwendet werden soll. |
setBounds |
setBounds(bounds)Parameter:
Rückgabewert:Keiner
Legt die Region fest, die für die Beeinflussung von Vorhersagen für Abfragen verwendet werden soll. Die Ergebnisse werden nur auf dieses Gebiet ausgerichtet und nicht vollständig darauf beschränkt. |
Geerbt:addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Ereignisse | |
|---|---|
places_changed |
function()Argumente:Keine
Dieses Ereignis wird ausgelöst, wenn der Nutzer eine Anfrage auswählt. Mit getPlaces können neue Orte abgerufen werden. |
SearchBoxOptions Schnittstelle
google.maps.places.SearchBoxOptions-Schnittstelle
Die Optionen, die für ein SearchBox-Objekt festgelegt werden können.
Attribute | |
|---|---|
bounds optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalDer Bereich, in dem die Vorhersagen für die Anfrage bevorzugt werden sollen. Vorhersagen werden auf Abfragen ausgerichtet, die auf diese Grenzen abzielen, sind aber nicht auf sie beschränkt. |