Grundlagen von Google-Maps

Erstellen Sie ein grundlegendes Google-Karte

Dieses Beispiel erstellt eine Google-Karte mit London, Großbritannien, als Mittelpunkt:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Google-Karte</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742, -0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

Nachfolgend werden wir Schritt für Schritt den obigen Beispiel analysieren.

Kartencontainer und -größe

Die Karte benötigt ein HTML-Element, um sie zu speichern:

<div id="googleMap" style="width:100%;height:400px"></div>

und die Größe der Karte zu konfigurieren.

Erstellen Sie eine Funktion, um die Kartenattribute zu setzen

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp Die Variablen definieren die Eigenschaften der Karte.

center Das Attribut legt den Mittelpunkt der Karte fest (verwendet Breitengrad und Längengradkoordinaten).

zoom Das Attribut legt die Zoomstufe der Karte fest (versuchen Sie, die Karte zu zoomen).

Sehen Sie sich diese Zeile an:

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

Es verwendet die übergebenen Parameter (mapProp) Ein neues Kartenobjekt wird im <div> mit id="googleMap" erstellt.

Mehrere Karten

Der folgende Beispiel definiert vier verschiedene Arten von Karten mit verschiedenen Kartentypen:

Beispiel

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

Kostenloser Google API-Schlüssel

Google ermöglicht es Websites, kostenlos jeden Google API zu aufrufen, mehrere tausend Male am Tag.

Besuchen Sie den folgenden Link, um zu erfahren, wie Sie einen API-Schlüssel erhalten:

https://developers.google.com/maps/documentation/javascript/get-api-key

Google Maps muss beim Laden der API in key In den Parametern finden Sie diesen API-Schlüssel:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>