Holen Sie sich einen Google Maps API-Schlüssel für Ihre Website
Die beste Möglichkeit, eine Google-Karte zu Ihrer Website hinzuzufügen, ist die Verwendung von Google Maps API. Und Google empfiehlt, dass Sie einen API-Schlüssel erhalten, um die Karten verwenden zu können.
Sie benötigen keinen API-Schlüssel, um Google Maps API Version 3 zu verwenden. Dies ist jedoch sehr nützlich, da Sie damit Ihre Nutzung überwachen und zusätzlichen Zugriff bezahlen können. Das Google Maps-API Version 3 hat ein Kontingent von 1 Anforderung pro Sekunde pro Benutzer und maximal 25.000 Anfragen pro Tag. Wenn Ihre Seiten diese Grenzwerte überschreiten, müssen Sie die Abrechnung aktivieren, um mehr zu erhalten.
So erhalten Sie einen Google Maps-API-Schlüssel
- Melden Sie sich mit Ihrem Google-Konto bei Google an.
- Gehen Sie zur Entwicklerkonsole
- Blättern Sie durch die Liste und suchen Sie nach dem Google Maps API v3. Klicken Sie anschließend auf die Schaltfläche "AUS", um es zu aktivieren.
- Lesen und stimmen Sie den Bedingungen zu.
- Gehen Sie zur API-Konsole und wählen Sie im linken Menü "API Access"
- Klicken Sie im Abschnitt "Einfacher API-Zugriff" auf die Schaltfläche "Neuen Serverschlüssel erstellen …".
- Geben Sie die IP-Adresse Ihres Webservers ein. Dies ist die IP, von der Ihre Kartenanforderungen stammen. Wenn Sie Ihre IP-Adresse nicht kennen, können Sie sie nachschlagen.
- Kopieren Sie den Text in die Zeile "API-Schlüssel:" (ohne diesen Titel). Dies ist Ihr API-Schlüssel für Ihre Karten.
Konvertieren Sie Ihre Adresse in Koordinaten
Um Google Maps auf Ihren Webseiten verwenden zu können, benötigen Sie den Längen- und Breitengrad für den Standort. Sie können diese über ein GPS erhalten oder Sie können ein Online-Tool wie Geocoder.us verwenden, um Sie darüber zu informieren.
- Gehen Sie zu Geocoder.us und geben Sie Ihre Adresse in das Suchfeld ein.
- Kopieren Sie die erste Zahl für den Breitengrad (ohne vorangestellten Buchstaben) und fügen Sie sie in eine Textdatei ein. Sie benötigen keine Gradanzeige (º).
- Kopieren Sie die erste Zahl für den Längengrad (wieder ohne Buchstaben) und fügen Sie sie in Ihre Textdatei ein.
Ihre Breiten- und Längengrade sehen etwa so aus:
40.756076-73.990838
Geocoder.us funktioniert nur für US-Adressen. Wenn Sie die Koordinaten in einem anderen Land benötigen, sollten Sie in Ihrer Region nach einem ähnlichen Werkzeug suchen.
03 von 05Hinzufügen der Karte zu Ihrer Webseite
Fügen Sie zunächst das Kartenskript zum hinzu
Ihres Dokuments
Öffnen Sie Ihre Webseite und fügen Sie der folgenden Liste hinzu KOPF Ihres Dokuments.
Ändern Sie den hervorgehobenen Teil in die Breiten- und Längengrade, die Sie in Schritt 2 notiert haben.
Fügen Sie das Kartenelement zu Ihrer Seite hinzu
Sobald Sie alle Skriptelemente dem hinzugefügt haben KOPF Ihres Dokuments müssen Sie Ihre Karte auf der Seite positionieren. Sie tun dies, indem Sie eine DIV Element mit der id = "map-canvas" Attribut. Ich empfehle Ihnen, dieses div auch mit der Breite und Höhe zu gestalten, die auf Ihre Seite passen wird:
Zum Schluss Upload und Test
Als letztes müssen Sie Ihre Seite hochladen und testen, ob Ihre Karte angezeigt wird. Hier ist ein Beispiel einer Google-Karte auf der Seite. Aufgrund der Funktionsweise des About.com CMS müssen Sie auf einen Link klicken, damit die Karte angezeigt wird. Dies wird auf Ihrer Seite nicht der Fall sein.
Wenn Ihre Karte nicht angezeigt wird, initialisieren Sie sie mit einem KAROSSERIE Attribut:
onload = "initialize ()" >
Sie können auch überprüfen, ob Ihre Karte nicht geladen wird:
- Suchen Sie in Ihrem JavaScript nach Schreibfehler. JavaScript ist case sensitive.
- Stellen Sie sicher, dass Sie die haben
ZoomenundCenterOptionen gesetzt. - Stellen Sie sicher, dass Ihre
DIVElement befindet sich auf der Seite mit der richtigen ID. - Stellen Sie sicher, dass Ihre
DIVElement hat eine Höhe.
Fügen Sie Ihrer Karte eine Markierung hinzu
Aber was nützt eine Karte Ihres Standorts, wenn es keinen Marker gibt, der den Leuten sagt, wohin sie gehen sollen?
Fügen Sie zum Hinzufügen einer Standardmarkierung für Google Maps unten in das Skript Folgendes hinzu var map = … Linie:
var myLatlng = new google.maps.LatLng ( Breitengrad, Längengrad );var marker = neuer google.maps.Marker ({Position: myLatlng,karte: karte,Titel:" Ehemaliger About.com Hauptsitz '});
Ändern Sie den hervorgehobenen Text in Ihren Breiten- und Längengrad und den Titel, den Sie anzeigen möchten, wenn Personen über der Markierung schweben.
Sie können der Seite so viele Markierungen hinzufügen, wie Sie möchten. Fügen Sie einfach neue Variablen mit neuen Koordinaten und Titeln hinzu. Wenn die Karte jedoch zu klein ist, um alle Markierungen anzuzeigen, werden diese nur angezeigt, wenn der Leser verkleinert.
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = neuer google.maps.Marker ({Position: latlng 2 ,karte: karte,Titel:" Apple Computer '});
Hier ist ein Beispiel einer Google-Karte mit einer Markierung. Aufgrund der Funktionsweise des About.com-CMS müssen Sie auf einen Link klicken, damit die Karte angezeigt wird. Dies wird auf Ihrer Seite nicht der Fall sein.
05 von 05Fügen Sie Ihrer Seite eine zweite (oder weitere) Karte hinzu
Wenn Sie sich meine Google Maps-Beispielseite angesehen haben, werden Sie feststellen, dass auf der Seite mehr als eine Karte angezeigt wird. Das ist sehr einfach zu machen. Hier ist wie.
- Holen Sie sich den Längen- und Breitengrad aller Karten, die Sie anzeigen möchten, wie wir es in Schritt 2 dieses Tutorials gelernt haben.
- Fügen Sie die erste Karte ein, wie wir sie in Schritt 3 dieses Tutorials gelernt haben. Wenn Sie möchten, dass die Karte eine Markierung enthält, fügen Sie die Markierung wie in Schritt 4 hinzu.
- Für die zweite Map müssen Sie Ihrem initialize () -Skript 3 neue Zeilen hinzufügen:
var latlng2 = new google.maps.LatLng ( zweite Koordinaten );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), meineOptions2); - Wenn Sie auch einen Marker auf der neuen Karte haben möchten, fügen Sie einen zweiten Marker hinzu, der auf die zweiten Koordinaten und die zweite Karte zeigt:
var myMarker2 = neuer google.maps.Marker ({position: latlng2 , Karte: map2 , Titel:" Ihr Markentitel ' }); - Fügen Sie dann die zweite hinzu, an der Sie die zweite Karte erstellen möchten. Und geben Sie sicher, dass Sie es geben
id = "map_canvas_2"ICH WÜRDE. - Wenn Ihre Seite geladen wird, werden zwei Karten angezeigt
Hier ist der Code einer Seite mit zwei Google Maps darauf:
