Was Sie wissen sollten
- Gehe zum Google Cloud Platform-Konsole und erstellen oder wählen Sie ein Projekt aus und klicken Sie dann auf Fortsetzen. Auf der Referenzen Seite, erhalten Sie eine API-Schlüssel.
- Fügen Sie den JavaScript-Code (siehe unten) in den BODY-Abschnitt des HTML-Dokuments ein.
- Geben Sie im Kopf des HTML-Dokuments CSS-Einschränkungen für die Karte an, einschließlich Größe, Farben und Seitenplatzierung.
In diesem Artikel wird erläutert, wie Sie eine Google-Karte mit einer Standortmarkierung in Ihre Webseite einfügen. Dieser Vorgang umfasst das Abrufen eines speziellen Softwareschlüssels von Google und das anschließende Hinzufügen des entsprechenden JavaScripts zur Seite.
Besorgen Sie sich einen Google Maps API-Schlüssel
Um seine Server davor zu schützen, durch Anfragen nach Karten und Standortabfragen bombardiert zu werden, drosselt Google den Zugriff auf seine Kartendatenbank. Sie müssen sich bei Google als Entwickler registrieren, um einen eindeutigen Schlüssel zu erhalten, um die Anwendungsprogrammierschnittstelle zum Anfordern von Daten von den Maps-Servern zu verwenden. Der API-Schlüssel ist kostenlos, es sei denn, Sie benötigen intensiven Zugriff auf die Server von Google (z. B. um eine Web-App zu entwickeln).
So registrieren Sie Ihren API-Schlüssel:
Gehe zum Google Cloud Platform-Konsole und nachdem Sie sich mit Ihrem Google-Konto angemeldet haben, erstellen Sie entweder ein neues Projekt oder wählen Sie ein vorhandenes aus.
Klicken Fortsetzen um die API und alle damit verbundenen Dienste zu aktivieren.
Auf der Referenzen Seite, erhalten Sie eine API-Schlüssel. Legen Sie bei Bedarf entsprechende Einschränkungen für den Schlüssel fest.
Sichern Sie Ihren API-Schlüssel mit empfohlene Vorgehensweise von Google empfohlen.
Wenn Sie der Meinung sind, dass die Karte häufiger angezeigt werden muss, als Ihr kostenloses Kontingent zulässt, vereinbaren Sie mit Google eine Abrechnung. Es ist unwahrscheinlich, dass die meisten Websites, insbesondere Blogs mit geringem Traffic oder Nischenseiten, einen Großteil der Quotenzuweisung verbrauchen.
Fügen Sie das JavaScript in Ihre Webseite ein
Fügen Sie im Abschnitt BODY des HTML-Dokuments den folgenden Code in Ihre Webseite ein:
// Initialisieren und fügen Sie die Kartenfunktion initMap() hinzu {
// Die Position des Flags var flag = {lat: XXX, lng: YYY};
// Die Karte, zentriert auf Flag var map = new google.maps. Map( document.getElementById('map'), {zoom: 4, center: flag});
// Der Marker, positioniert am Flag var marker = new google.maps. Marker({position: flag, map: map}); } src=" https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap">
Ändern Sie in diesem Code Folgendes:
- Ersetzen Flagge mit einem Namen, der auf den Standort verweist, den Sie anheften. Halte es einfach und kurz (wie Zuhause oder Büro oder Paris oder Detroit). Sie können diesen Code ausführen lassen Flagge unverändert, aber das Ändern des Namens unterstützt die Wiederverwendung dieses Codes auf derselben Seite, um mehrere verschiedene Maps einzubetten.
- Ersetzen XXX und YYY mit dem Breiten- und Längengrad in Dezimalzahlen der Position der Kartenmarkierung. Sie müssen diese Werte ersetzen, damit die Karte richtig angezeigt wird. Eine einfache Möglichkeit, den Breiten- und Längengrad zu ermitteln, besteht darin, Google Maps zu öffnen und mit der rechten Maustaste auf den genauen Ort zu klicken, den Sie markieren möchten. Wählen Sie im Kontextmenü Was gibt es hier? um den Breiten- und Längengrad anzuzeigen.
- Ersetzen YOUR_API_KEY mit dem API-Schlüssel, den Sie von Google erhalten haben. Setzen Sie keine Leerzeichen zwischen das Gleichheitszeichen und das kaufmännische Und. Ohne den Schlüssel schlägt die Abfrage fehl und die Karte wird nicht richtig angezeigt.
Optimale Praktiken
Geben Sie im Kopf Ihres HTML-Dokuments CSS-Einschränkungen für die Karte an, einschließlich Größe, Farben und Seitenplatzierung.
Das Kartenskript von Google enthält Attribute wie Zoomen und Center die offen für Endbenutzermodifikationen sind. Diese erweiterte Technik wird durch die Entwicklerdokumentation von Google unterstützt.
Eine Google Maps API ist ein wertvolles Gut. Die Best-Practice-Anleitung von Google bietet hervorragende Ratschläge, um den Schlüssel gegen Missbrauch durch andere zu sichern. Angemessene Sicherheit ist besonders wichtig, wenn Sie ein Zahlungssystem für den API-Zugriff eingerichtet haben, da Sie beim Diebstahl Ihrer Zugangsdaten mit einer hohen Rechnung rechnen können. Insbesondere das Beispiel, das wir hier gezeigt haben tut Betten Sie den API-Schlüssel direkt in den Code ein – wir haben dies getan, um das Verfahren zu demonstrieren. In einer Produktionsumgebung ist es jedoch besser, Umgebungsvariablen für den Schlüssel anzugeben, anstatt den Schlüssel direkt einzufügen.