Google Maps Grundlagen

Erstelle eine einfache Google Map

Jetzt erstellen wir eine einfache Google Map.

Unten ist eine Google Map, die London, England zeigt:

Beispiel

<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></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>

Selbst ausprobieren »

Beispielanalyse

Wir verwenden das obige Beispiel, um den Erstellungsprozess von Google Maps zu analysieren.

Warum sollte die Anwendung HTML5 deklarieren?

<!DOCTYPE html>

Die meisten Browser rendern Seiten mit HTML5-Dokumenten im "Standardmodus", was bedeutet, dass Ihre Anwendung mit allen gängigen Browsern kompatibel ist.

Darüber hinaus verwenden Browser ohne einen DOCTYPE-Tag den Quirks-Modus, um Seiteninhalte zu rendern.

Tipp:Es ist zu beachten, dass einige CSS im Quirks-Modus im Standardmodus nicht anwendbar sind. In einer bestimmten Anwendung müssen alle prozentualen Größen vom übergeordneten Blockelement geerbt werden. Wenn im übergeordneten Modul keine Größe angegeben ist, ist der Standardwert 0 x 0 Pixel. Wenn Sie Prozentsätze verwenden möchten, können Sie sie im <style>-Tag deklarieren, wie unten gezeigt:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Diese Stilangabe zeigt an, dass das Kartenmodul (GoogleMap) eine HTML-Höhe von 100% haben sollte.

Google Maps API-Schlüssel hinzufügen

Im folgenden Beispiel muss das erste <script>-Tag die Google Maps API enthalten:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Platzieren Sie den von Google generierten API-Schlüssel inkeyim Parameter (key=YOUR_API_KEY)。

Der sensorDer Parameter ist erforderlich. Er wird verwendet, um anzugeben, ob die Anwendung einen Sensor (wie GPS-Navigation) verwendet, um den Standort des Benutzers zu bestimmen. Der Parameterwert kann auf true oder false gesetzt werden.

HTTPS

Wenn Ihre Anwendung eine sichere HTTP-Anwendung (HTTPS: HTTP Secure) ist, können Sie HTTPS verwenden, um die Google Maps API zu laden:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Asynchrones Laden

Ähnlich können wir die Google Maps API auch laden, nachdem die Seite vollständig geladen wurde.

Das folgende Beispiel verwendet window.onload, um Google Maps zu laden, nachdem die Seite vollständig geladen wurde. Die Funktion loadScript() erstellt ein <script>-Tag, das die Google Maps API lädt. Darüber hinaus wird der Parameter callback=initialize am Ende des Tags hinzugefügt, und initialize() wird als Callback-Funktion ausgeführt, nachdem die API vollständig geladen wurde:

Beispiel

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;

Selbst ausprobieren »

Karteneigenschaften definieren

Bevor wir die Karte initialisieren, müssen wir zunächst ein Map-Eigenschaftsobjekt erstellen, um einige Karteneigenschaften zu definieren:

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

center (Mittelpunkt)

Die center-Eigenschaft legt den Mittelpunkt der Karte fest und erzeugt mithilfe von Koordinaten (Breitengrad, Längengrad) einen Mittelpunkt auf der Karte.

Zoom (Zoomstufe)

Die zoom-Eigenschaft gibt die Zoomstufe der Karte an. zoom: 0 zeigt die gesamte Weltkarte vollständig herausgezoomt.

MapTypeId (anfänglicher Kartentyp)

Die mapTypeId-Eigenschaft gibt den anfänglichen Typ der Karte an.

mapTypeId umfasst die folgenden vier Typen:

  • google.maps.MapTypeId.HYBRID: Zeigt eine transparente Ebene mit Hauptstraßen über Satellitenbildern an
  • google.maps.MapTypeId.ROADMAP: Zeigt eine normale Straßenkarte an
  • google.maps.MapTypeId.SATELLITE: zeigt Satellitenbilder
  • google.maps.MapTypeId.TERRAIN: Zeigt eine Karte mit natürlichen Merkmalen (wie Gelände und Vegetation)

Wo die Google-Karte angezeigt werden soll

Normalerweise wird eine Google-Karte innerhalb eines <div>-Elements verwendet:

Hinweis:Die Karte wird in der Größe angezeigt, die im div festgelegt ist, daher können wir die Kartengröße im <div>-Element festlegen.

Erstellen Sie ein Map-Objekt.

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

Der obige Code verwendet den Parameter (mapProp), um eine neue Karte im <div>-Element (mit der id googleMap) zu erstellen.

Tipp:Wenn Sie mehrere Karten auf der Seite erstellen möchten, müssen Sie nur neue Kartenobjekte hinzufügen.

Das folgende Beispiel definiert vier Karteninstanzen (die vier Karten verwenden unterschiedliche Kartentypen):

Beispiel

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 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);

Selbst ausprobieren »

Karte laden

Nachdem das Fenster geladen wurde, wird die Funktion initialize() ausgeführt, um das Map-Objekt zu initialisieren, wodurch sichergestellt wird, dass die Google Map geladen wird, nachdem die Seite vollständig geladen wurde:

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