Einleitung
In diesem Tutorial erfahren Sie, wie Sie mithilfe von HTML eine Google-Karte mit einer Markierung auf einer Webseite einfügen. Hier sehen Sie die Karte, die Sie mit dieser Anleitung erstellen. Eine Markierung ist im kalifornischen Mountain View platziert, die andere in Seattle im US-Bundesstaat Washington.
Erste Schritte
Um mithilfe von HTML eine Google-Karte mit einer Markierung zu erstellen, sind diese Schritte erforderlich, die im Folgenden näher beschrieben werden:
Sie benötigen einen Webbrowser. Wählen Sie aus der Liste der unterstützten Browser einen gängigen Browser wie Google Chrome (empfohlen), Firefox, Safari oder Edge für Ihre Plattform aus.
Schritt 1: API-Schlüssel anfordern
In diesem Abschnitt wird erläutert, wie Sie Ihre Anwendung mit Ihrem eigenen API-Schlüssel bei der Maps JavaScript API authentifizieren können.
So fordern Sie einen API-Schlüssel an:
Erstellen Sie ein neues Projekt oder wählen Sie ein vorhandenes Projekt aus.
Klicken Sie auf Weiter, um die API und die zugehörigen Dienste zu aktivieren.
Fordern Sie auf der Seite Anmeldedaten einen API-Schlüssel an und legen Sie die Einschränkungen für den API-Schlüssel fest. Wenn Sie bereits einen API-Schlüssel ohne Einschränkungen oder einen Schlüssel mit Browsereinschränkungen haben, können Sie auch diesen verwenden.
Informationen zum Verhindern von Kontingentdiebstahl und zum Sichern Ihres API-Schlüssels finden Sie unter Mit API-Schlüsseln authentifizieren.
Aktivieren Sie die Abrechnung. Weitere Informationen finden Sie unter Nutzung und Abrechnung.
Sie können Ihren API-Schlüssel jetzt verwenden.
Schritt 2: HTML, CSS und JS erstellen
Hier ist der Code für eine einfache HTML-Webseite:
<html> <head> <title>Add a Map with Markers using HTML</title> <!-- TODO: Add bootstrap script tag. --> </head> <body> <!-- TODO: Add a map with markers. --> </body> </html>
Zum Laden einer Karte muss ein script-Tag mit dem Bootstrap-Ladeprogramm für die Maps JavaScript API eingefügt werden. Ein Beispiel dafür sehen Sie im folgenden Snippet (verwenden Sie Ihren eigenen API-Schlüssel):
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta" defer ></script>
Spoiler-Warnung: Ein fertiges Beispiel steht auf JSFiddle für Tests bereit.
Schritt 3: Karte hinzufügen
Um eine Google-Karte auf der Seite einzufügen, kopieren Sie das gmp-map-HTML-Element und fügen es dann zwischen den body-Tags der HTML-Seite ein:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>
Dadurch erhalten Sie die folgende Karte:
Die neu erstellte Karte ist auf die Metropolregion San José (Kalifornien) zentriert.
Schritt 4: Markierung hinzufügen
Zum Platzieren einer Markierung auf der Karte verwenden Sie das gmp-advanced-marker-HTML-Element.
Kopieren Sie das folgende Snippet und fügen Sie es so ein, dass es den gesamten gmp-map-Code überschreibt, den Sie im vorherigen Schritt hinzugefügt haben.
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<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>Mit dem Code oben werden zwei Markierungen eingefügt und die Parameter zoom und center im gmp-map-Code geändert, damit diese Markierungen besser sichtbar sind. Zur Verwendung von erweiterten Markierungen ist eine Karten-ID erforderlich (DEMO_MAP_ID kann genutzt werden).
Tipps und Fehlerbehebung
- Sie können die Karte mit einem personalisierten Stil individualisieren.
- Verwenden Sie die Entwicklertools in Ihrem Webbrowser, um Ihren Code zu testen und auszuführen, Fehlerberichte zu lesen und Probleme mit dem Code zu beheben.
- Mit den folgenden Tastenkombinationen können Sie die Konsole in Chrome aufrufen:
Befehlstaste + Optionstaste + J (Mac) oder Strg + Umschalttaste + J (Windows). So rufen Sie die Breiten- und Längengrade für einen Ort in Google Maps ab:
- Öffnen Sie Google Maps in einem Browser.
- Klicken Sie mit der rechten Maustaste auf die genaue Position auf der Karte, für die Sie Koordinaten benötigen.
- Wählen Sie im Kontextmenü, das eingeblendet wird, Was ist hier? aus. Unten auf dem Bildschirm wird eine Infokarte eingeblendet. Die Breiten- und Längengrade finden Sie in der letzten Zeile der Infokarte.
Mit dem Geocoding-Dienst können Sie eine Adresse in Breiten- und Längengrade umwandeln. Ausführliche Informationen zu den ersten Schritten mit dem Geocoding-Dienst finden Sie in den Entwicklerleitfäden.
Vollständiges Codebeispiel
Unten sehen Sie die finale Karte und das vollständige Codebeispiel, das für dieses Tutorial genutzt wurde.
<html>
<head>
<title>Add a Map with Markers using HTML</title>
<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"
style="height: 400px"
>
<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 script 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&libraries=maps,marker&v=beta"
defer
></script>
</body>
</html>