Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

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 JavaScript API zu beginnen. Außerdem veröffentlichen wir die Referenz zur Google Maps JavaScript API.

Hello World

Die einfachste Möglichkeit, sich mit der Google Maps JavaScript 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:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></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 die Maps JavaScript API 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>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</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.

Laden der Google Maps JavaScript API

Verwenden Sie zum Laden der Google Maps JavaScript API ein Tag script wie das im folgenden Beispiel:
    <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 zur Verwendung der Maps JavaScript API benötigen. Das Tag script ist obligatorisch.

Das Attribut async ermöglicht die Wiedergabe der restlichen Website im Browser, während die Maps JavaScript 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.

Hinweis: Google Maps APIs Premium Plan-Kunden können zum Laden der API entweder einen API-Schlüssel oder eine gültige Client-ID verwenden. Lesen Sie weitere Informationen zu Authentifizierungsparametern für Premium Plan-Kunden.

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, stellen wir alle Maps JavaScript API über HTTPS bereit. Mit der HTTPS-Verschlüsselung wird Ihre Website sicherer und ist besser vor Spionage und unbefugten Eingriffen geschützt.

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

Bei Bedarf können Sie 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 der Maps JavaScript 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 Maps JavaScript API bieten, aber nur auf explizite Anforderung geladen werden. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.

API synchron laden

Im Tag script, mit dem die Maps JavaScript 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. Geben Sie die Vergrößerungsstufe als Ganzzahl an.

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 der Maps JavaScript 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 folgende Liste enthält die ungefähre Detailebene, von der Sie erwarten können, dass sie auf der jeweiligen Vergrößerungsstufe angezeigt wird:

  • 1: Welt
  • 5: Landmasse/Kontinent
  • 10: Stadt
  • 15: Straßen
  • 20: Gebäude

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

Informationen zum Laden von Kacheln abhängig von der aktuellen Vergrößerungsstufe durch die Maps JavaScript 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