Local Context- und Kartenoptionen festlegen

In diesem Abschnitt werden die Optionen beschrieben, die Sie für eine LocalContextMapView-Instanz festlegen können, sowie die inneren Map in LocalContextMapView. Wenn Sie eine neue LocalContextMapView-Instanz erstellen, geben Sie bis zu 10 Arten von Orten sowie eine maximale Anzahl von Orten an (maximal 24). Die innere Map unterstützt dieselben MapOptions wie eine standardmäßige Maps JavaScript API Map.

Sie können die Attribute der lokalen 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

Du kannst bis zu zehn Arten von Orten angeben, die von der lokalen Kontextbibliothek zurückgegeben werden sollen. Geben Sie Ortstypen mit dem Attribut placeTypePreferences an und übergeben Sie einen oder mehrere Ortstypen, wie im folgenden Beispiel gezeigt:

placeTypePreferences: ['restaurant', 'cafe']

Gewichtung für Ortstyp

Sie können jedem angegebenen Typ eine relative Gewichtung zuweisen. Dadurch werden Typen mit einer höheren Gewichtung häufiger angezeigt. Die Gewichtung ist ein optionaler, erweiterter Parameter, der nur bei Bedarf verwendet werden sollte. Wenn dieser Parameter 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 Property eine relative Gewichtung zuweisen. Das folgende Beispiel zeigt die Gewichtung der angegebenen Ortstypen, um doppelt so viele restaurant- und cafe-Ergebnisse wie für primary_school zurückzugeben:

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

Die Ergebnisse hängen davon ab, ob ein bestimmter Ortstyp in einer bestimmten Region vorhanden ist. Wenn Sie shopping_mall beispielsweise eine Gewichtung von 10 zuweisen, hat dies keine Auswirkungen, wenn in der Gegend keine Einkaufszentren vorhanden sind.

Maximale Anzahl von Orten festlegen

Mit der Property maxPlaceCount kannst du die maximale Anzahl von Orten festlegen (bis zu 24), die von der lokalen Kontextbibliothek zurückgegeben werden sollen:

maxPlaceCount: 12

Standortbeschränkung festlegen

Suchvorgänge sind standardmäßig an den Darstellungsbereich der Karte gebunden. Sie können eine Reihe von Grenzen angeben, um Suchergebnisse auf einen größeren oder kleineren Bereich zu beschränken. Setze dazu das Attribut locationRestriction von LocalContextMapView auf die gewünschte LatLngBounds. Dieser Wert kann größer oder kleiner als der Kartendarstellungsbereich sein. Beispiel

Routenplaner aktivieren

Wenn Sie die Wegbeschreibung auf Ihrer Karte aktivieren möchten, legen Sie das Attribut directionsOptions von LocalContextMapView fest und übergeben ein Objektobjekt-Literal für den Startpunkt. Der Endpunkt wird durch den aktuell ausgewählten Ort bestimmt. Wenn kein Ursprungspunkt übergeben wird, werden die Routen 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, wie durch die Kartengrenzen und die Zoomstufe definiert, wirkt sich direkt auf die Entfernungen aus, die von einem bestimmten Ausgangspunkt zurückgegeben werden können. Wenn für den Darstellungsbereich beispielsweise eine Fläche von 160 km angegeben ist, können POIs in einem Umkreis von bis zu 80 km vom Ausgangsort erscheinen. So sorgen Sie dafür, dass Ihre App Fußwege mit angemessenen Entfernungen zurückgibt:

  • Deaktivieren Sie die Fußgängerroute bei niedrigeren Zoomstufen, in der Regel unter Zoomstufe 16.
  • Definieren Sie eine locationRestriction mit einem kleineren Bereich der Begrenzungen. So wird verhindert, dass POIs außerhalb des Einschränkungsbereichs angezeigt werden.

Startort der Route ändern

Sie können den Wert der directionsOptions-Property 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

Du kannst die anfängliche Layoutposition und die Sichtbarkeitsoptionen für die Ortsdetailansicht und Ortsauswahl festlegen, indem du die Properties placeChooserViewSetup und placeDetailsViewSetup von LocalContextMapView festlegst. Sie können die Ansicht der Ortsdetails 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 Dokumentrichtung und variiert je nachdem, ob Ihre App von rechts nach links oder rechtsläufig ausgeführt wird.

Für die Ortsauswahl gibt es drei Layoutoptionen:

  • Mit INLINE_START wird die Ortsauswahl festgelegt, die im START des Inhaltsablaufs angezeigt wird (links der Karte für LTR, rechts für RTL).
  • INLINE_END legt fest, dass die Ortsauswahl am ENDE des Inhaltsflusses angezeigt wird (rechts auf der Karte bei LTR, links bei RTL).
  • Mit BLOCK_END wird die Ortsauswahl festgelegt, die im unteren Bereich der Seite angezeigt wird. Dies gilt sowohl für LTR als auch für RTL.

Wenn Sie die Positionsauswahl auf INLINE_START oder INLINE_END festlegen, müssen Sie die Position der Ortsdetailansicht immer auf denselben Wert setzen. Sie können festlegen, dass die Detailansicht des Orts in einem Infofenster angezeigt wird. Für BLOCK_END muss der Layoutmodus für die Detailansicht des Orts immer auf INFO_WINDOW festgelegt sein.

Die Local Context Library ändert die Position der Ortsauswahl anhand der gerenderten Größe von LocalContextMapView. In einer größeren LocalContextMapView wird die Ortsauswahl standardmäßig am Anfang des Inhaltsflusses angezeigt (links der Karte für LTR, rechts für RTL). Bei einem kleineren LocalContextMapView, z. B. auf einem Mobilgerät, wird die Standardeinstellung Die Standortauswahl unten auf der Karte geändert und die Ortsdetails werden in einem Infofenster angezeigt. Die Zoomstufe des Browsers wirkt sich auf die Pixelabmessungen aus, bei denen sich die Position der Auswahl zwischen der Seite und der Unterseite ändert (der Schwellenwert erhöht sich proportional zur Zoomstufe).

Wir empfehlen, die Standardposition der Ortsauswahl über funktionale Aufrufe zu konfigurieren. Wenn Sie diese Werte direkt angeben, werden alle Änderungen des responsiven Layouts überschrieben.

Ortsauswahl zu Beginn des Inhaltsflusses

Damit die Ortsauswahl zu Beginn des Contentflusses angezeigt wird (auf der linken Seite der Karte bei LTR rechts, bei RTL rechts), muss position auf INLINE_START für placeChooserViewSetup und placeDetailsViewSetup eingestellt sein, wie im folgenden Beispiel 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

Damit die Ortsauswahl am Ende des Inhaltsablaufs angezeigt wird (rechts für LTR, links für RTL), setze position auf INLINE_END für placeChooserViewSetup und placeDetailsViewSetup, wie im folgenden Beispiel 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'};
    }
  },
});

Ortsauswahl unten

Wenn du möchtest, dass die Ortsauswahl unten auf der Karte angezeigt wird, setze den position von placeChooserViewSetup auf BLOCK_END und den layoutMode von placeDetailsViewSetup auf INFO_WINDOW, wie im folgenden Beispiel gezeigt:

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'};
    }
  },
});

Ortsauswahl ausblenden

Die Ortsauswahl ist standardmäßig sichtbar. Wenn Sie die Ortsauswahl ausblenden möchten, legen Sie für layoutMode den Wert HIDDEN fest, 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

Wenn die Detailansicht des Orts in einem Infofenster angezeigt werden soll, setze layoutMode auf INFO_WINDOW, wie im folgenden Beispiel gezeigt:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

Sie können diese Einstellung in Kombination mit einer beliebigen Positionsauswahl verwenden (links, rechts oder unten).

Ansicht mit den Ortsdetails programmatisch ausblenden

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

localContextMapView.hidePlaceDetailsView()

Wenn Sie auf die Karte klicken, wird die Ortsdetailansicht 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 Wert hidesOnMapClick wie im folgenden Beispiel bedingt steuern:

// 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'};
  },
});

Innere Map-Optionen festlegen

Wenn Sie eine LocalContextMapView-Instanz haben, können Sie MapOptions für die innere Map-Instanz festlegen. Map in 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 festlegen:

// 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',
  });
}