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.
TypeScript
// This example adds a map using web components.
function initMap(): void {
console.log('Maps JavaScript API loaded.');
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example adds a map using web components.
function initMap() {
console.log("Maps JavaScript API loaded.");
}
window.initMap = initMap;
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
gmp-map {
height: 400px;
}
HTML
<html>
<head>
<title>Add a Map Web Component</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
center="37.4220656,-122.0840897"
zoom="10"
map-id="DEMO_MAP_ID"
></gmp-map>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
defer
></script>
</body>
</html>
Testbeispiel
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 durch Ihre eigene Karten-ID, um die optionalen Funktionen zum cloudbasierten Gestalten von Karteninhalten zu nutzen.
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.
TypeScript
// This example adds a map with markers, using web components.
function initMap(): void {
console.log('Maps JavaScript API loaded.');
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example adds a map with markers, using web components.
function initMap() {
console.log("Maps JavaScript API loaded.");
}
window.initMap = initMap;
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
gmp-map {
height: 400px;
}
HTML
<html>
<head>
<title>Add a Map with Markers using Web Components</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></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>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
Testbeispiel
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.
TypeScript
// This example adds a map using web components.
function initMap(): void {
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 = new google.maps.InfoWindow({
//@ts-ignore
content: advancedMarker.title,
});
infoWindow.open({
//@ts-ignore
anchor: advancedMarker
});
});
});
}
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example adds a map using web components.
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 = new google.maps.InfoWindow({
//@ts-ignore
content: advancedMarker.title,
});
infoWindow.open({
//@ts-ignore
anchor: advancedMarker,
});
});
});
}
}
window.initMap = initMap;
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
gmp-map {
height: 400px;
}
HTML
<html>
<head>
<title>Add a Map Web Component with Events</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></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>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
Testbeispiel
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.
Weiteres Vorgehen
- 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“.