Optionen für lokalen Kontext und Karte festlegen

Aufgrund der mäßigen Nutzung der Betafunktion wird das UI-Widget „Lokale Kontextbibliothek“ in der Maps JavaScript API ab Version 3.52.2 eingestellt. Auch wenn es weiter funktioniert, raten wir davon ab, es in neuen Projekten zu verwenden.

Wenn Sie selbst eine entsprechende Funktion erstellen möchten, sollten Sie sich die Lösung „Neighborhood Discovery“ in Quick Builder ansehen oder die Places Library in der Maps JavaScript API verwenden. Als Unterstützung beim Arbeiten mit der Places Library stehen Codebeispiele und Codelabs zur Verfügung.

Dieses Produkt oder diese Funktion ist eine Betaversion (pre-GA). Pre-GA-Produkte und ‑Funktionen werden eventuell nur eingeschränkt unterstützt. Außerdem sind Änderungen an diesen Produkten und Funktionen möglicherweise nicht mit anderen pre-GA-Versionen kompatibel. Pre-GA-Angebote sind durch die dienstspezifischen Nutzungsbedingungen für die Google Maps Platform abgedeckt. Weitere Informationen finden Sie in den Beschreibungen der Einführungsphasen.

In diesem Abschnitt werden die Optionen beschrieben, die Sie für eine LocalContextMapView-Instanz sowie das innere Map-Objekt in LocalContextMapView festlegen können. Wenn Sie eine neue LocalContextMapView-Instanz erstellen, geben Sie bis zu 10 Ortstypen sowie die maximale Anzahl der Orte an, die zurückgegeben werden sollen (bis zu 24). Das innere Map-Objekt unterstützt dieselben MapOptions wie ein standardmäßiges Map-Objekt der Maps JavaScript API.

Sie können die Eigenschaften für die lokale Kontextsuche jederzeit nach der Initialisierung der lokalen Kontextbibliothek aktualisieren. Wenn Sie maxPlaceCount, placeTypePreferences, locationRestriction oder locationBias aktualisieren, wird möglicherweise automatisch eine neue Suche ausgelöst.

Ortstypen angeben

Sie können bis zu 10 Ortstypen angeben, die von der lokalen Kontextbibliothek zurückgegeben werden sollen. Dazu verwenden Sie die Eigenschaft placeTypePreferences und übergeben mindestens einen Ortstyp, wie im folgenden Beispiel gezeigt:

placeTypePreferences: ['restaurant', 'cafe']

Gewichtung von Ortstypen

Sie können jedem angegebenen Typ eine relative Gewichtung zuweisen. Typen mit einer höheren Gewichtung werden dann häufiger angezeigt. Die Gewichtung ist ein optionaler, erweiterter Parameter, der nur bei Bedarf verwendet werden sollte. Wenn er weggelassen wird, ermittelt die lokale Kontextbibliothek die Standardgewichtungen, die sich mit der Zeit ändern und verbessern können.

Mit dem Attribut weight können Sie jeder Eigenschaft eine relative Gewichtung zuweisen. Im folgenden Beispiel sehen Sie, wie Ortstypen so gewichtet werden, dass sie doppelt so viele Ergebnisse für restaurant und cafe wie für primary_school zurückgeben:

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

Die Ergebnisse hängen davon ab, ob der jeweilige Ortstyp in einem bestimmten Gebiet vorhanden ist. Wenn Sie shopping_mall beispielsweise eine Gewichtung von 10 zuweisen, hat dies keine Auswirkungen, wenn es in der Gegend keine Einkaufszentren gibt.

Maximale Anzahl von Orten festlegen

So verwenden Sie die Eigenschaft maxPlaceCount, um die maximale Anzahl von Orten (bis zu 24) festzulegen, die die lokale Kontextbibliothek zurückgeben soll:

maxPlaceCount: 12

Hinweis: Sie können das Laden von lokalen Kontextdaten bei der Initialisierung verschieben, indem Sie maxPlaceCount auf „0“ setzen. Dadurch wird auch das Widget „Lokaler Kontext“ ausgeblendet. Wenn die Daten geladen werden sollen, legen Sie für maxPlaceCount einen Wert von „1“ oder höher fest. Dadurch wird automatisch eine Suche ausgelöst und das Widget „Lokaler Kontext“ angezeigt. Weitere Informationen

Standortbeschränkung festlegen

Suchvorgänge sind standardmäßig an den Darstellungsbereich der Karte gebunden. Sie können Grenzen festlegen, um Suchergebnisse auf einen größeren oder kleineren Bereich zu beschränken. Dazu setzen Sie die Eigenschaft locationRestriction der LocalContextMapView auf den gewünschten LatLngBounds-Wert. Der Wert kann größer oder kleiner als der Darstellungsbereich der Karte sein. Beispiel ansehen

Routenplaner aktivieren

Um den Routenplaner auf Ihrer Karte zu aktivieren, legen Sie die Eigenschaft directionsOptions von LocalContextMapView fest und übergeben ein LatLng-Objektliteral für den Startpunkt. Der Endpunkt wird durch den aktuell ausgewählten Ort definiert. Wenn kein Startpunkt übergeben wird, wird der Routenplaner deaktiviert. Das folgende Beispiel zeigt, wie Sie einen Startpunkt zum Aktivieren von Fußgängerrouten auf einer Karte festlegen:

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

Die Größe des Darstellungsbereichs der Karte, der durch die Kartengrenzen und die Zoomstufe definiert wird, wirkt sich direkt auf die Entfernungen aus, die von einem bestimmten Startpunkt zurückgegeben werden können. Wenn für den Darstellungsbereich beispielsweise eine Breite von 160 Kilometern festgelegt ist, können POIs in einem Umkreis von bis zu 80 Kilometern um den Startpunkt herum angezeigt werden. So sorgen Sie dafür, dass Ihre Anwendung Fußgängerrouten mit angemessenen Entfernungen zurückgibt:

• Deaktivieren Sie Fußgängerrouten bei niedrigeren Zoomstufen, normalerweise unter der Zoomstufe 16.
• Definieren Sie eine locationRestriction mit einem kleineren Bereich. Dadurch wird verhindert, dass POIs außerhalb des eingeschränkten Bereichs angezeigt werden.

Startpunkt der Route ändern

Sie können den Wert der Eigenschaft directionsOptions während des Lebenszyklus von LocalContextMapView jederzeit ändern. Im folgenden Beispiel wird ein neuer Wert für directionsOptions festgelegt:

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

oder

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

Layout und Sichtbarkeit festlegen

Um die anfänglichen Optionen für Layoutposition und Sichtbarkeit für die Ansicht mit den Ortsdetails und die Ortsauswahl festzulegen, legen Sie die Eigenschaften placeChooserViewSetup und placeDetailsViewSetup von LocalContextMapView fest. Die Ansicht mit den Ortsdetails lässt sich auch programmatisch ausblenden.

Layoutposition der Ortsauswahl festlegen

Sie können die Layoutposition der Ortsauswahl festlegen, wenn Sie LocalContextMapView initialisieren. Die Layoutposition richtet sich nach der Leserichtung und hängt davon ab, ob es sich um eine Links-nach-rechts- (left-to-right, LTR) oder Rechts-nach-links-Anwendung (right-to-left, RTL) handelt.

Für die Ortsauswahl gibt es drei Layoutoptionen:

• Bei INLINE_START wird die Ortsauswahl am Anfang des Inhaltsflusses angezeigt (links auf der Karte für LTR, rechts für RTL).
• Bei INLINE_END wird die Ortsauswahl am Ende des Inhaltsflusses angezeigt (rechts auf der Karte für LTR, links für RTL).
• Bei BLOCK_END wird die Ortsauswahl sowohl für LTR als auch für RTL unten auf der Seite angezeigt.

Wenn Sie die Position der Ortsauswahl auf INLINE_START oder INLINE_END festlegen, müssen Sie das auch für die Position der Ansicht mit den Ortsdetails tun. Sie können optional angeben, dass die Ansicht mit den Ortsdetails in einem Infofenster angezeigt werden soll. Bei BLOCK_END muss der Layoutmodus für die Ansicht mit den Ortsdetails immer auf INFO_WINDOW festgelegt sein.

Die lokale Kontextbibliothek passt die Position der Ortsauswahl dynamisch an die gerenderte Größe von LocalContextMapView an. In einer größeren LocalContextMapView wird die Ortsauswahl standardmäßig am Anfang des Inhaltsflusses angezeigt (links für LTR, rechts für RTL). In einer kleineren LocalContextMapView, z. B. auf einem Mobilgerät, wird die Ortsauswahl unten auf der Karte angezeigt und die Ortsdetails werden in einem Infofenster angezeigt. Die Zoomstufe des Browsers wirkt sich auf die Pixelabmessungen aus, bei denen die Ortsauswahl von der Seite nach unten und umgekehrt verschoben wird (der Schwellenwert erhöht sich proportional zur Zoomstufe).

Wir empfehlen, Funktionsaufrufe zu verwenden, um die Standardposition der Ortsauswahl zu konfigurieren. Wenn Sie diese Werte direkt angeben, werden alle responsiven Layoutänderungen überschrieben.

Ortsauswahl zu Beginn des Inhaltsflusses

Wenn die Ortsauswahl zu Beginn des Inhaltsflusses angezeigt werden soll (links auf der Karte für LTR, rechts für RTL), müssen Sie für placeChooserViewSetup und placeDetailsViewSetup die Option INLINE_START als position festlegen, wie hier gezeigt:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

Ortsauswahl am Ende des Inhaltsflusses

Wenn die Ortsauswahl am Ende des Inhaltsflusses angezeigt werden soll (rechts für LTR, links für RTL), müssen Sie für placeChooserViewSetup und placeDetailsViewSetup die Option INLINE_END als position festlegen, wie hier gezeigt:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

Achtung: Mit der lokalen Kontextbibliothek ist es nicht möglich, die Ortsauswahl auf der einen und die Details auf der anderen Seite zu positionieren. Wird nur die Position einer Ansicht festgelegt, nicht aber die der anderen, wird dies ignoriert und die lokale Kontextbibliothek verwendet die Standardpositionen.

Ortsauswahl unten

Wenn die Ortsauswahl unten auf der Karte angezeigt werden soll, müssen Sie für placeChooserViewSetup die Option BLOCK_END als position festlegen. Für den layoutMode von placeDetailsViewSetup muss INFO_WINDOW angegeben werden. Hier ein Beispiel:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

Achtung: Die Ortsauswahl kann nur unten auf der Seite angezeigt werden, wenn Ortsdetails auch als Infofenster eingeblendet werden. Wenn Sie nur die Position der Ortsauswahl festlegen, wird Ihre Eingabe ignoriert.

Ortsauswahl ausblenden

Die Ortsauswahl ist standardmäßig sichtbar. Wenn Sie sie ausblenden möchten, geben Sie für layoutMode den Wert HIDDEN an, wie im folgenden Beispiel gezeigt:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

Das folgende Beispiel zeigt, wie die Ortsauswahl ausgeblendet wird, wenn sich die Standardposition zu BLOCK_END ändert:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

Ansicht mit den Ortsdetails in einem Infofenster

Damit die Ansicht mit den Ortsdetails in einem Infofenster angezeigt wird, setzen Sie layoutMode auf INFO_WINDOW, wie im folgenden Beispiel gezeigt:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

Bei dieser Einstellung kann die Position der Ortsauswahl beliebig festgelegt werden (links, rechts oder unten).

Ansicht mit den Ortsdetails programmatisch ausblenden

Sie können die Ansicht mit den Ortsdetails programmatisch ausblenden, indem Sie hidePlaceDetailsView() für eine LocalContextMapView-Instanz aufrufen, wie im folgenden Beispiel gezeigt:

localContextMapView.hidePlaceDetailsView()

Wenn auf die Karte geklickt wird, wird die Ansicht mit den Ortsdetails standardmäßig ausgeblendet. Sie können die Option hidesOnMapClick in placeDetailsViewSetup auf false setzen, um dieses Standardverhalten zu verhindern.

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

Wenn das Infofenster für Ortsdetails nur beim Klicken auf die Karte ausgeblendet werden soll, können Sie den hidesOnMapClick-Wert mit Bedingungsanweisungen steuern, wie im folgenden Beispiel gezeigt:

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

Hinweis: Wenn die Karte in diesem Beispiel groß genug ist, damit mit dem responsiven Standardlayout die Ortsdetails an der Seite in einem Ansichtsbereich angezeigt werden können, wird durch Klicken auf die Karte die Ansicht mit den Ortsdetails nicht ausgeblendet.

Optionen für das innere Map-Objekt festlegen

Sobald Sie eine LocalContextMapView-Instanz haben, können Sie MapOptions für die innere Map-Instanz angeben. Die Map in einer LocalContextMapView unterstützt dieselben Kartenoptionen wie eine standardmäßige Maps JavaScript API-Karte. Das folgende Beispiel zeigt, wie Sie eine neue LocalContextMapView-Instanz erstellen und einige Optionen für die innere Map-Instanz angeben:

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}