Google Maps JavaScript API ist ein einfach zu bedienendes und ziemlich leistungsstarkes JavaScript-Tool, mit dem wir Karten auf einer Website erstellen und anzeigen können. In diesem Artikel erfahren Sie, wie Sie die Google Maps JS-API einrichten und anschließend eine einfache Karte mit einer Markierung und einer Polylinienform sowie einigen anderen Funktionen erstellen.
Einrichten der Karte
- 1 Öffnen oder erstellen Sie Ihre Webseite. Wenn Sie noch keine Webseite haben, in die Sie die Karte einfügen möchten, können Sie die folgende HTML5-Vorlage verwenden. Speichern Sie es als 'map_page.html':
<html lang="en"> <Kopf> <Meta Zeichensatz="utf-8"> <Titel>Meine Prospektkarte</Titel> </Kopf> <Karosserie> </Karosserie> </html>
- 2 Fügen Sie die Google Maps JS-Datei hinzu. Fügen Sie dazu die folgende Codezeile in Ihre HTML-Datei ein
Bereich, in einer neuen Zeile, kurz vor dem Schließen
Etikett:
<Skript asynchron verschieben src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"> </Skript>
- 3 Holen Sie sich einen API-Schlüssel und fügen Sie ihn in die JS-URL ein. Um Google Maps JS API zu verwenden - wie bei jedem anderen Google API - benötigen Sie einen API-Schlüssel, der wie ein Passcode ist. Sie müssen dann Ihren neuen Schlüssel in die URL einfügen, die oben im Schritt [YOUR_API_KEY] steht (entfernen Sie die eckigen Klammern). Um Ihren eigenen Schlüssel zu erhalten, siehe Schlüssel / Authentifizierungsseite.
- 4 Fügen Sie einen HTML-Map-Container hinzu. Google Maps zeigt die Karte in einem HTML-Element an, daher müssen Sie eines bereitstellen. Fügen Sie die folgende Markup-Zeile in das Feld ein
:
<div Ich würde="Karte"></div>
- 5 Style den Kartencontainer. Sie müssen festlegen, wie groß die Karte sein soll, wenn sie angezeigt wird. Dazu sollten Sie CSS verwenden. Sie können dem Dokument Folgendes hinzufügen
:
<>> #Karte Höhe: 500px; Breite: 700px; >
- 6 Erstellen Sie das Kartenobjekt. Um mit dem Schreiben des JavaScript-Codes zu beginnen, der die Karte erstellt, müssen Sie ein hinzufügen
Bereich zum
nach der Kartencontainer
div
. Auch innerhalb davon können Sie das Kartenobjekt erstellen, indem Sie das Symbol aufrufenKarte()
Funktion des google.maps-Objekts. Sie müssen auch die Funktion das Map Container HTML Element wie folgt übergeben:<Skripttyp='Text / Javascript'> var Karte; Funktion initMap() // Erzeuge das Kartenobjekt. Karte = Neu Google.Karten.Karte(Dokument.getElementById('Karte')); Skript>
- 7 Stellen Sie den Zoom und die Mitte der Karte ein. Die Zoom- und Center-Eigenschaften der Karte bestimmen den Bereich, den die Karte beim Laden der Karte standardmäßig abdeckt. Dies sind nur die Karten Standard Werte; die Karten Strom Zoom und Mittelpunkt können später geändert werden, wenn Sie diese Steuerelemente aktivieren - wir kommen später dazu.
Hinweis: Sie müssen einfach die folgenden Codezeilen in Ihren kopierenElement (aus dem vorherigen Schritt), und stellen Sie sicher, dass es ist Innerhalb die Funktion initMap () vor dem Schließen '':
Karte.setZoom(2); Karte.setCenter(lat: 0, lng: 0);
- 8 Fügen Sie eine Markierung hinzu. Markierungen zeigen den Standort eines Punkts auf einer Karte an. In Leaflet sind Marker eine Art "Overlay", so dass sie direkt zu Karten hinzugefügt werden können. Standardmäßig wird eine Markierung als roter Pin angezeigt, bei dem es sich um ein Standardbild handelt, das Sie ändern können.
var Marker = Neu Google.Karten.Marker(); var Koordinaten = lat: 20, lng: 20; Marker.Position setzen(Koordinaten); Marker.setMap(Karte); Marker.setTitle('Tschad');
- 9 Polylinie hinzufügen Genau wie der Marker ist eine Polylinie eine Art Overlay, wird aber für einen anderen Zweck verwendet. Eine Polylinie ist einfach eine Linie mit mehreren Segmenten. Sie definieren es, indem Sie die Koordinaten der Punkte angeben, zwischen denen die Liniensegmente liegen. Die Koordinaten müssen ein Array von Koordinatenpunktobjekten sein. Eine der großen Eigenschaften der Polylinien von Google Maps ist, dass sie "geodätisch" sein können, was bedeutet, dass sie sich der Form der Erde anpassen können! Sie können dies später als Option festlegen.
var Koordinaten = [ lat: 20, lng: 10, lat: 10, lng: 20, lat: 20, lng: 30 ]; var Polylinie = Neu Google.Karten.Polylinie(); Polylinie.SetPfad(Koordinaten); // Benutze das oben definierte Array Polylinie.setMap(Karte);
- 10 Optionen festlegen Jedes Overlay in Google Maps verfügt über Optionen, mit denen Sie bestimmen können, wie das Overlay aussieht. Sie können die Optionen der Markierung (aus den obigen Schritten) so einstellen, dass sie eindeutig aussieht, aber unten sind Optionen, die Sie für die gerade erstellte Polylinie festlegen können:
Polylinie.setOptions( Strichfarbe: '# FF0000', // Hellrot SchlaganfallOpazität: 1.0, // Vollkommen undurchsichtig (nicht durchscheinend) Schlaganfall: 2 // Dicke von 2 Pixeln );
- 11 Die fertige Karte.
Facebook
Twitter
Google+