Informationen für Einsteiger

Führen Sie die folgenden Schritte aus, um Ihrem Projekt das Widget „Lokale Kontextbibliothek“ hinzuzufügen, die Bibliothek zu initialisieren und die Kartenansicht mit lokalem Kontext zu konfigurieren.

Erforderliche APIs und SDKs aktivieren

Wenn Sie die lokale Kontextbibliothek verwenden möchten, müssen Sie die Maps JavaScript API und die Places API aktivieren. Gehen Sie dazu wie unter APIs oder SDKs aktivieren beschrieben vor. Beide APIs müssen in der Google Cloud Console im selben Projekt aktiviert werden.

Lokale Kontextbibliothek laden

Wenn Sie die lokale Kontextbibliothek laden möchten, müssen Sie zuerst wie gewohnt die Maps JavaScript API laden und dann folgende Parameter einfügen:

  • libraries=localContext lädt die lokale Kontextbibliothek.
  • v=beta ist erforderlich, um diesen Release zu verwenden.
  • key enthält Ihren API-Schlüssel.
  • callback sorgt dafür, dass die Funktion initMap() ausgeführt wird.

Im folgenden Beispiel sehen Sie ein Skript-Tag mit allen oben genannten Optionen:

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

Neue Kartenansicht mit lokalem Kontext erstellen

Wenn Sie die lokale Kontextbibliothek in eine Webseite einbinden möchten, müssen Sie zuerst eine LocalContextMapView-Instanz erstellen und die gewünschten Attribute festlegen:

  • element: das div-Element, in dem die Karte angezeigt werden soll (in diesem Fall „map“)
  • placeTypePreferences: die Arten von Orten, die von der lokalen Kontextbibliothek zurückgegeben werden sollen (bis zu 10)
  • maxPlaceCount: die maximale Anzahl von Orten, die angezeigt werden sollen (zwischen 1 und 24)
  • locationRestriction (optional): grenzt die Suche nach Orten auf einen bestimmten Standort ein. Die Standardeinstellung entspricht dem Darstellungsbereich der Karte.

Sobald Sie eine LocalContextMapView-Instanz festgelegt haben, können Sie Kartenoptionen für die innere Map-Instanz angeben. Die in einem LocalContextMapView-Element enthaltene Karte unterstützt dieselben Kartenoptionen wie eine standardmäßige Maps JavaScript API-Karte. Im folgenden Beispiel sehen Sie, wie Sie eine neue LocalContextMapView-Instanz erstellen und einige Optionen für die innere Map festlegen:

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

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

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;

Laden lokaler Kontextdaten verschieben

Sie können das Laden von lokalen Kontextdaten bei der Initialisierung verschieben, indem Sie die LocalContextMapView-Option maxPlaceCount auf „0“ setzen. Das ist insbesondere dann nützlich, wenn Sie warten möchten, bis Nutzer die Daten auch tatsächlich sehen können. Wenn die lokalen Kontextdaten geladen werden sollen, legen Sie für maxPlaceCount einen Wert von „1“ oder höher fest. Im folgenden Beispiel wird die Karte zuerst ohne lokale Kontextdaten initialisiert, später werden die Daten dann geladen, indem maxPlaceCount festgelegt wird:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Anzeige der Benutzeroberfläche für lokalen Kontext ein-/ausschalten

Sie können die Elemente der Benutzeroberfläche für lokalen Kontext ein- oder ausblenden, indem Sie die LocalContextMapView-Option maxPlaceCount auf „0“ setzen. Damit die Benutzeroberfläche für den lokalen Kontext wieder angezeigt wird, legen Sie für maxPlaceCount einen Wert von „1“ oder höher fest.

Mindestmaße für Karten festlegen

Die Ansicht der lokalen Kontextbibliothek wird dynamisch geändert, je nachdem, in welcher Größe LocalContextMapView gerendert wird. Die Mindestmaße für LocalContextMapView sind:

  • 300 × 480 Pixel (Hochformat)
  • 480 × 380 Pixel (Querformat)

Wenn das Element für LocalContextMapView die Mindestgröße unterschreitet, werden die Elemente der lokalen Kontextbibliothek, einschließlich Ortsauswahl und POIs, nicht angezeigt. Der Zoomfaktor des Browsers wirkt sich auf die Mindestmaße aus. Wird das Browserfenster z. B. auf 200 % gezoomt, ändern sich die Mindestmaße auf 600 × 960 (Hochformat) und 960 × 760 (Querformat).

Empfehlungen für Preisvergleichsportale

CSS-Klassen im DOM der lokalen Kontextbibliothek sind nicht Teil der öffentlichen API. Das Gestalten, Bearbeiten oder Auswählen von Elementen im DOM der lokalen Kontextbibliothek ist nicht möglich. Wir empfehlen dringend, die folgenden Richtlinien einzuhalten, um Konflikte bei den DOM-Stilen zu vermeiden und dafür zu sorgen, dass Karten mit der lokalen Kontextbibliothek wie gewünscht angezeigt werden:

  • Verwenden Sie keine CSS-Klassen der lokalen Kontextbibliothek, da sie ohne Vorankündigung geändert werden können.
  • Ändern Sie nicht den Stil von Elementen im DOM der lokalen Kontextbibliothek, bearbeiten Sie sie nicht und wählen Sie sie nicht aus.

Wenn Sie ein CSS-Framework verwenden, über das solche Änderungen vorgenommen werden, können Sie Stilkonflikte möglicherweise umgehen.

Gehen Sie z. B. so vor, wenn Sie die Gesamtseite von box-sizing in border-box ändern möchten:

  • Verwenden Sie box-sizing-Überschreibungen, die das <html>-Element auf border-box festlegen.
  • Nutzen Sie box-sizing: initial für das Element, das die Kartenansicht mit der lokalen Kontextbibliothek enthält.
  • Verwenden Sie für alle anderen Elemente box-sizing: inherit.

So wird sichergestellt, dass box-sizing im DOM der lokalen Kontextbibliothek durch einen Selector mit niedriger Spezifizität auf den Standardwert zurückgesetzt wird.

Im Code sieht das so aus:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}