Google Maps Grund

Erstellen Sie eine Grund Google Map

In diesem Beispiel wird eine Google Map zentriert in London, England:

Beispiel

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>

Versuch es selber "

Der Rest dieser Seite beschreibt das obige Beispiel, Schritt für Schritt.

1. Laden Sie die Google-API

Die Google Maps API ist eine JavaScript-Bibliothek. Es kann mit einem auf einer Web - Seite hinzugefügt werden <script> tag:

2. Stellen Sie Karteneigenschaften

Erstellen Sie eine Funktion, um die Karte zu initialisieren:

function initialize() {
}

In der Initialisierungsfunktion, erstellen Sie ein Objekt (mapProp) die Eigenschaften für die Karte zu definieren:

var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Das Zentrum Eigenschaft gibt an, wo die Karte zu zentrieren. Erstellen Sie ein LatLng Objekt die Karte auf einen bestimmten Punkt zu zentrieren. Führen Sie die Koordinaten in der Reihenfolge: Breitengrad, Längengrad.

Die Zoom - Eigenschaft gibt die Zoomstufe für die Karte. Zoom: 0 zeigt eine Karte der Erde vollständig verkleinert. Höhere Zoomstufen vergrößern mit einer höheren Auflösung in.

Die mapTypeId Eigenschaft gibt den Kartentyp angezeigt werden soll . Die folgenden Kartentypen werden unterstützt:

FAHRPLAN (normal, default 2D map) - (normal, default 2D map) - (normal, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)

3. Erstellen Sie eine Karte Container

Erstellen Sie ein <div> Element in der Karte zu halten. Verwenden Sie CSS Größe das Element:

Die Karte wird immer "inherit" die Größe von seinem Containerelement.

4. Erstellen Sie ein Map-Objekt

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

Der Code erstellt oben eine neue Karte innerhalb des <div> Element mit id = "googleMap", unter Verwendung der Parameter, die übergeben werden (mapProp) .

5. Fügen Sie einen Ereignis-Listener die Karte zu laden

Fügen Sie einen DOM - Listener, die ausführen wird initialize() Funktion auf Fenster Last (when the page is loaded) ist (when the page is loaded) :

google.maps.event.addDomListener(window, 'load', initialize);

asynchron Loading

Es ist auch möglich, die Google Maps API bei Bedarf zu laden.

Das folgende Beispiel verwendet window.onload die Google Maps API zu laden, nachdem die Seite vollständig geladen ist.

Die loadScript() Funktion erstellt die Google Maps API <script> -Tag. Darüber hinaus wird der Rückruf = initialisieren Parameter an das Ende der URL hinzugefügt , um das auszuführen initialize() Funktion , nachdem das API vollständig geladen ist:

Beispiel

function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

Versuch es selber "

Mehrere Karten

Das Beispiel definiert unter vier Karten auf einer Seite (vier Karten mit unterschiedlichen Kartentypen):

Beispiel

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);

Versuch es selber "

Google API Key

Google ermöglicht Ihre Website jede Google API aufrufen, viele tausend Mal pro Tag.

Wenn Sie mehr Verkehr planen, sollten Sie eine kostenlose API-Schlüssel von Google.

Zum https://console.developers.google.com einen kostenlosen Schlüssel zu bekommen.

Google Maps erwartet , dass die API - Schlüssel in der Schlüsselparameter zu finden , wenn das Laden einer API:

❮ Zurück Weiter Kapitel ❯