Erste Schritte

Zielgruppe

Diese Dokumentation richtet sich an Personen, die mit der Programmierung von JavaScript und objektorientierten Programmierungskonzepten vertraut sind. Außerdem sollten Ihnen Google Maps aus Benutzersicht bekannt sein. Im Internet gibt es viele Anleitungen für JavaScript.

Diese konzeptionelle Dokumentation soll es Ihnen ermöglichen, schnell mit der Erkundung und Entwicklung von Anwendungen mit der Google Maps API zu beginnen. Außerdem veröffentlichen wir die Referenz zu Google Maps API.

Hello World

Die einfachste Möglichkeit, sich mit der Google Maps API vertraut zu machen, ist die Betrachtung eines einfachen Beispiels. Die folgende Webseite zeigt eine Karte, in deren Mittelpunkt sich Sydney, New South Wales, Australien, befindet:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Beispiel anzeigen (map-simple.html)

Sogar in diesem einfachen Beispiel sind einige Punkte zu beachten:

  1. Wir deklarieren die Anwendung mithilfe der Deklaration <!DOCTYPE html> als HTML5.
  2. Wir erstellen ein Element div mit der Bezeichnung „map“, das die Karte enthalten soll.
  3. Wir definieren eine JavaScript-Funktion, mit der die Karte im Element div erstellt wird.
  4. Wir laden das Maps API-JavaScript mithilfe eines Tags script.

Diese Schritte werden nachfolgend erläutert.

Anwendung als HTML5 laden

Wir empfehlen für Ihre Webanwendung die Deklaration eines DOCTYPE vom Typ „true“. In diesen Beispielen haben wir unsere Anwendungen mithilfe des einfachen HTML5-DOCTYPE als HTML5 deklariert, siehe unten:

<!DOCTYPE html>

In den meisten aktuellen Browsern werden Inhalte, die mit diesem DOCTYPE deklariert sind, im „Standardmodus“ wiedergegeben; Sie erreichen also eine bessere browserübergreifende Kompatibilität Ihrer Anwendung. Darüber hinaus degradiert DOCTYPE moderat; Browser ohne DOCTYPE-Deklaration verwenden den so genannten „Quirks-Modus“, um die Inhalte anzuzeigen.

Beachten Sie, dass einige CSS, die im Quirks-Modus funktionieren, im Standardmodus nicht zulässig sind. Insbesondere müssen alle prozentualen Größen von übergeordneten Blockelementen erben, und wenn für eines der übergeordneten Elemente keine Größe angegeben ist, wird eine Größe von 0x0 Pixel angenommen. Aus diesem Grund fügen wir folgende Deklaration <style> hinzu:

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

Diese CSS-Deklaration gibt an, dass der Kartencontainer <div> (mit ID map) 100 % der Höhe des HTML-Textkörpers einnehmen soll. Beachten Sie, dass diese Prozentsätze explizit für <body> und <html> angegeben werden müssen.

Google Maps API laden

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Die im Tag script enthaltene URL bezeichnet den Speicherort einer JavaScript-Datei, mit der sämtliche Symbole und Definitionen geladen werden, die Sie für die Verwendung von Google Maps API benötigen. Dieser Tag script ist obligatorisch.

Mit dem Attribut async wird die Wiedergabe der restlichen Website im Browser ermöglicht, während Maps API geladen wird. Sobald der Ladevorgang der API abgeschlossen ist, wird die angegebene Funktion mithilfe des Parameters callback durch die API aufgerufen.

Der Parameter key enthält den API-Schlüssel Ihrer Anwendung. Weitere Informationen finden Sie unter Schlüssel anfordern.

Google Maps API for Work-Benutzer sollten die Seite Google Maps JavaScript API laden in der DokumentationMaps API for Work lesen. Diese enthält wichtige Informationen zum Laden von Maps API in die jeweiligen Anwendungen.

HTTPS oder HTTP

Wir halten Sicherheit im Internet für sehr wichtig, daher empfehlen wir, soweit wie möglich HTTPS zu verwenden. Im Zuge unserer Bemühungen, das Internet sicherer zu gestalten, haben wir alle Google Maps APIs über HTTPS bereitgestellt. Mit der HTTPS-Verschlüsselung wird Ihre Website sicherer und ist besser vor Spionage und unbefugten Eingriffen geschützt.

Wir empfehlen, Google Maps JavaScript API über HTTPS mithilfe des oben genannten Tags <script> zu laden.

Bei Bedarf können Sie Google Maps JavaScript API über HTTP laden, indem Sie http://maps.googleapis.com/ anfordern (bzw. http://maps.google.cn für Benutzer in China).

Bibliotheken

Beim Laden von JavaScript Maps API über die URL können Sie bei Bedarf weitere Bibliotheken mithilfe des URL-Parameters libraries laden. Bibliotheken sind Codemodule, die zusätzliche Funktionen für die zentrale JavaScript API bieten, aber nur auf explizite Anforderung geladen werden. Weitere Informationen finden Sie unter Bibliotheken in der V3 Maps API.

API synchron laden

Im Tag script, mit dem Maps API geladen wird, können Sie das Attribut async und den Parameter callback weglassen. In diesem Fall wird das Laden der API gesperrt, bis die API vollständig heruntergeladen wurde.

Diese Einstellung wird das Laden Ihrer Seite vermutlich verlangsamen. Es bedeutet aber, dass Sie, unter der Annahme, dass die API bereits geladen wurde, nachfolgende Tags <script> schreiben können.

DOM-Elemente zuordnen

<div id="map"></div>

Damit die Karte auf einer Webseite angezeigt wird, muss für sie ein Platz reserviert werden. In der Regel erstellen wir dazu ein Element div und rufen eine Referenz auf dieses Element im Dokumentobjektmodell (DOM) des Browsers ab.

Im obenstehenden Beispiel haben wir CSS verwendet, um die Höhe des Elements <div> der Karte auf „100 %“ festzulegen. Damit wird die Größe auf die Bildschirmgröße des mobilen Geräts erweitert. Sie müssen die Werte für Breite und Höhe ggf. noch an die Bildschirmgröße und die Auffüllung des Browsers anpassen. Beachten Sie, dass ein Element <div> in der Regel die Breite von ihrem enthaltenden Element bezieht; ein leeres Elemente <div> hat normalerweise die Höhe 0. Aus diesem Grund müssen Sie im Element <div> immer explizit eine Höhe angeben.

Kartenoptionen

Für jede Karte gibt es zwei erforderliche Optionen: center und zoom.

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

Vergrößerungsstufen

Die anfängliche Auflösung, bei der die Karte angezeigt werden soll, wird durch die Eigenschaft zoom definiert, wobei der Zoom 0 einer maximal verkleinerten Weltkarte entspricht und größere Vergrößerungsstufen eine Darstellung in höherer Auflösung bedeuten.

zoom: 8

Die Bereitstellung einer Karte mit der gesamten Welt als einzelnes Bild würde entweder eine immens große Karte oder eine kleine Karte mit sehr geringer Auflösung erfordern. Aus diesem Grund sind Bilder in Google Maps und in Maps API in „Kacheln‘“ aus kleineren Karten und „Vergrößerungsstufen“ unterteilt. Bei niedrigen Vergrößerungsstufen deckt eine kleine Anzahl von Kartenkacheln einen großen Bereich ab; bei höheren Vergrößerungsstufen haben die Kacheln eine höhere Auflösung und decken einen kleineren Bereich ab.

Die folgenden drei Bilder geben denselben Bereich von Tokyo in den Vergrößerungsstufen 0, 7 und 18 wieder.

Informationen zum Laden von Kacheln abhängig von der aktuellen Vergrößerungsstufe durch Maps API finden Sie in der Dokumentation der Kartentypen unter Kachelkoordinaten.

Das Kartenobjekt

map = new google.maps.Map(document.getElementById("map"), {...});

Die JavaScript-Klasse, die eine Karte repräsentiert, ist die Klasse Map. Objekte dieser Klasse definieren eine einzelne Karte auf einer Seite. (Sie können mehrere Instanzen dieser Klasse erstellen – jedes Objekt definiert eine eigene Karte auf der Seite.) Wir legen eine neue Instanz dieser Klasse mithilfe des JavaScript-Operators new an.

Beim Erstellen einer neuen Karteninstanz geben Sie auf der Seite ein HTML-Element <div> als Container für die Karte an. HTML-Knoten sind dem JavaScript-Objekt document untergeordnet, und wir beziehen eine Referenz zu diesem Element über die Methode document.getElementById().

Mit diesem Code wird eine Variable (mit der Bezeichnung map) definiert und einem neuen Objekt Map zugewiesen. Die Funktion Map() ist als Konstruktor bekannt; ihre Definition ist nachfolgend dargestellt:

Konstruktor Beschreibung
Map(mapDiv:Node, opts?:MapOptions) Mit dem Konstruktor wird eine neue Karte innerhalb des genannten HTML-Containers – in der Regel ein Element <div> – mithilfe beliebiger (optionaler) Parameter erstellt, die weitergegeben werden.

Fehlerbehebung

Um Sie Ihnen die Fertigstellung und Ausführung Ihres Kartencodes zu erleichtern, haben Brendan Kenny und Mano Marks einige häufige Fehler mit den zugehörigen Korrekturen im nachfolgenden Video zusammengestellt.

Wenn Ihr Code nicht ausgeführt werden kann:

  • Suchen Sie nach Tippfehlern. Denken Sie daran, dass in JavaScript zwischen Groß- und Kleinschreibung unterschieden wird.
  • Prüfen Sie die Grundlagen – einige der häufigsten Probleme entstehen beim ersten Erstellen der Karte. Beispiele:
    • Stellen Sie sicher, dass Sie die Eigenschaften zoom und center in Ihren Kartenoptionen definiert haben.
    • Überprüfen Sie, ob Sie ein Element <div> deklariert haben, in dem die Karte auf dem Bildschirm angezeigt wird.
    • Stellen Sie sicher, dass für das Element <div> für die Karte eine Höhe definiert ist. Standardmäßig werden Elemente <div> mit der Höhe 0 erstellt und somit nicht angezeigt.
    Ziehen Sie unsere Beispiele einer Referenzimplementierung zu Rate.
  • Verwenden Sie zur Unterstützung bei der Fehlersuche einen JavaScript-Debugger, z. B. den Debugger aus den Chrome Developer Tools. Suchen Sie zunächst in der JavaScript-Konsole nach Fehlern.
  • Senden Sie Fragen an Stack Overflow. Informationen zum Senden von wichtigen Frage finden Sie auf der Seite Support.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API