Webkomponenten sind ein beliebter W3C-Standard, der HTML, CSS und JS in benutzerdefinierten und wiederverwendbaren HTML-Elementen vereint. Zu diesen wiederverwendbaren Komponenten gehören sowohl einzelne Funktionen wie die Darstellung der Bewertung für einen Ort als auch komplexere Geschäftslogik. In diesem Leitfaden werden die Webkomponenten beschrieben, die in der Maps JavaScript API verfügbar sind.
Weitere Informationen zum Standard finden Sie unter Webkomponenten.
Zielgruppe
Diese Dokumentation soll Ihnen einen schnellen Einstieg in die Verwendung und Entwicklung von Anwendungen mit Webkomponenten ermöglichen. Sie sollten bereits mit den Konzepten der HTML- und CSS-Programmierung vertraut sein.
Karte anzeigen
Mit einem Beispiel gelingt der Einstieg in die Webkomponenten am leichtesten. Im folgenden Beispiel wird eine Karte der Region San Jose angezeigt.
HTML
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
</script>
<script>
function initMap() {
console.log('Maps JavaScript API loaded.');
}
</script>
</head>
<body>
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
</body>
</html>
CSS
gmp-map { height: 500px; }
Bei diesem Beispiel sind einige Dinge zu beachten:
- Die Maps JavaScript API wird asynchron aufgerufen. Die Callback-Funktion wird verwendet, um zu erfahren, wann die API geladen wurde.
- Die Präsentation der Karte wird mit dem benutzerdefinierten Element
<gmp-map>
definiert. - Die Eigenschaften einer Karte werden durch Angeben von Attributen im benutzerdefinierten Element
<gmp-map>
definiert. - Der Stil kann inline auf benutzerdefinierte Elemente angewandt oder in einer separaten CSS-Datei deklariert werden.
Stil der Basiskarte festlegen
Eine Karten-ID ist eine Kennung, die einem bestimmten Kartenstil oder -element zugeordnet ist. Ersetzen Sie DEMO_MAP_ID
zum cloudbasierten Gestalten von Karteninhalten durch Ihre eigene Karten-ID.
Unter Cloudbasiertes Gestalten von Karteninhalten erfahren Sie, wie Sie eine Karten-ID erstellen und einen benutzerdefinierten Stil konfigurieren.
Markierungen zur Karte hinzufügen
Genauso wie integrierte HTML-Tags verschachtelt werden können, um komplexe Inhaltshierarchien zu erstellen, kann auch <gmp-advanced-marker>
innerhalb eines Elements verschachtelt werden, um eine oder mehrere Kartenmarkierungen zu präsentieren.
HTML
<html> <head> <title>Simple Map with Markers</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta"> </script> <script> function initMap() { console.log('Maps JavaScript API loaded.'); } </script> </head> <body> <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID"> <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker> </gmp-map> </body> </html>
CSS
gmp-map { height: 500px; }
Hier wurden zwei <gmp-advanced-marker>
-Elemente innerhalb des benutzerdefinierten <gmp-map>
-Elements hinzugefügt. Der Text für title
liefert einen zusätzlichen Hover-Text und ein Bedienungshilfen-Label für das angegebene Element.
JavaScript-Ereignisse
Ein großer Vorteil der Webkomponenten ist die Benutzerfreundlichkeit. So können Nutzer mit wenigen Codezeilen eine Karte einblenden, auch wenn sie nur über begrenzte Kenntnisse von JavaScript oder fortgeschrittener Programmierung verfügen. Nach der Implementierung folgt der Code den bekannten Mustern der anderen HTML-Elemente. Zum Beispiel kann das native Browser-Ereignissystem verwendet werden, um auf Aktionen für Karten oder erweiterte Markierungen zu reagieren, z. B. das Anklicken einer Markierung.
HTML
<html> <head> <title>Google Maps - Marker Click Example</title> <link rel="stylesheet" href="style.css" type="text/css"> <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta"> </script> <script> function initMap() { console.log('Maps JavaScript API loaded.'); const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker"); for (const advancedMarker of advancedMarkers) { customElements.whenDefined(advancedMarker.localName).then(async () => { advancedMarker.addEventListener('gmp-click', async () => { const {InfoWindow} = await google.maps.importLibrary("maps"); const infoWindow = new InfoWindow({ content: advancedMarker.title }); infoWindow.open({ anchor: advancedMarker }); }); }); } } </script> </head> <body> <gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID"> <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker> </gmp-map> </body> </html>
CSS
gmp-map { height: 500px; }
In diesem Beispiel steht initMap
für die Callback-Funktion, die erforderlich ist, wenn die Maps JavaScript API vollständig geladen wurde. Mit dem Code werden Listener für die einzelnen Markierungen definiert und ein Infofenster eingeblendet, wenn eine Markierung angeklickt wird.
Nächste Schritte
- Im Issue Tracker für die Maps JavaScript API können Sie Funktionen anfordern und Fehler melden.
- In der erweiterten Komponentenbibliothek finden Sie Informationen zu Webkomponenten auf höherer Ebene, wie „place overview“.