So fügen Sie einer Webseite mit API eine Google Map hinzu



von

Um eine Google-Karte mit einer Standortmarkierung in Ihre Webseite einzufügen, müssen Sie einen speziellen Softwareschlüssel von Google erwerben und dann das entsprechende JavaScript zur Seite hinzufügen. Obwohl der Prozess unkompliziert ist, ist es hilfreich, zumindest flüchtige Hintergrundkenntnisse in HTML und JavaScript zu haben.


Erhalten Sie einen Google Maps API-Schlüssel

Um seine Server vor Bombardierungen durch Anfragen nach Karten und Standortsuchen zu schützen, drosselt Google den Zugriff auf seine Kartendatenbank. Sie müssen sich bei Google als Entwickler registrieren, um einen eindeutigen Schlüssel für die Verwendung der Anwendungsprogrammierschnittstelle zum Anfordern von Daten von den Maps-Servern zu erhalten. Der API-Schlüssel ist kostenlos, es sei denn, Sie benötigen einen umfangreichen Zugriff auf die Server von Google (z. B. um eine Web-App zu entwickeln).

So registrieren Sie Ihren API-Schlüssel:

  1. Rufen Sie die Google Cloud Platform Console auf und erstellen Sie nach dem Anmelden mit Ihrem Google-Konto entweder ein neues Projekt oder wählen Sie ein vorhandenes aus.

  2. Klicken Sie Fortfahren um die API und alle zugehörigen Dienste zu aktivieren.

  3. Auf dem Referenzen Seite, erhalten Sie eine API-Schlüssel. Legen Sie bei Bedarf relevante Einschränkungen für den Schlüssel fest.

  4. Sichern Sie Ihren API-Schlüssel mithilfe der von Google empfohlenen Best Practices.

Wenn Sie der Meinung sind, dass die Karte häufiger angezeigt werden muss, als es Ihr kostenloses Kontingent zulässt, richten Sie eine Abrechnungsvereinbarung mit Google ein. Es ist unwahrscheinlich, dass die meisten Websites - insbesondere Blogs oder Nischenwebsites mit geringem Datenverkehr - einen Großteil der Kontingentzuweisung verbrauchen.

Fügen Sie das JavaScript in Ihre Webseite ein

Fügen Sie den folgenden Code in Ihre Webseite im Abschnitt BODY des HTML-Dokuments ein:

<div id = "map"> </ div>
<Script>
// Karte initialisieren und hinzufügen
Funktion initMap () {
// Der Ort der Flagge
var flag = {lat: XXX, lng: YYY};
// Die Karte, zentriert auf der Flagge
var map = new google.maps.Map (
document.getElementById ('map'), {zoom: 4, center: flag});
// Der Marker, der an der Flagge positioniert ist
var marker = new google.maps.Marker ({Position: Flagge, Karte: Karte});
}
</ Script>
<Skript asynchron verschieben
src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">


Schreibe einen Kommentar