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 FunktioninitMap()
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
: dasdiv
-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 aufborder-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;
}