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

Hinzufügen einer Google-Karte mit einem Marker zu Ihrer Website

Einführung

In dieser Anleitung erfahren Sie, wie Sie einer Webseite eine einfache Google-Karte mit einem Marker hinzufügen. Sie eignet sich für Personen, die HTML- und CSS-Neueinsteiger sind oder Vorkenntnisse besitzen und über Grundkenntnisse von JavaScript verfügen. Einen Leitfaden für Fortgeschrittene zum Erstellen von Karten finden Sie im Entwickler-Leitfaden.

Die folgende Karte wird von Ihnen anhand dieser Anleitung erstellt.

Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte in dieser Anleitung benötigen.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Erste Schritte

Das Erstellen einer Google-Karte mit einem Marker auf Ihrer Webseite umfasst drei Schritte:

  1. Eine HTML-Seite erstellen
  2. Eine Karte mit einem Marker hinzufügen
  3. Einen API-Schlüssel anfordern

Sie benötigen einen Webbrowser. Wählen Sie, abhängig von Ihrer Plattform, einen bekannten Webbrowser wie Google Chrome (empfohlen), Firefox, Safari oder Internet Explorer.

Schritt 1: Eine HTML-Seite erstellen

Hier ist der Code für eine einfache HTML-Webseite:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Beachten Sie, dass es sich herbei um eine sehr einfache Karte mit einer Überschriftenebene 3 (h3), einem einzelnen div-Element und einem style-Element handelt, die jeweils in der nachfolgenden Tabelle erläutert werden. Sie können der Webseite beliebige Inhalte hinzufügen.

Probieren Sie es selbst aus

Rechts oben im oben gezeigten Feld mit dem Beispielcode befinden sich zwei Schaltflächen. Klicken Sie auf die Schaltfläche ganz links, um das Beispiel in JSFiddle zu öffnen.

Erläuterungen zum Code

Diese Tabelle dient zur Erläuterung der einzelnen Abschnitte des oben dargestellten Codes.

Code und Beschreibung
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Erstellt eine HTML-Seite, die aus einem Kopf (head) und einem Körper (body) besteht.
<h3>My Google Maps Demo</h3>

Fügt eine Überschriftenebene 3 oberhalb der Karte ein.
<div id="map"></div>

Definiert einen Bereich der Seite für Ihre Google-Karte.
In dieser Phase der Anleitung wird der div-Bereich einfach als grauer Block angezeigt, da Sie noch keine Karte hinzugefügt haben. Der Grund, warum er in Grau dargestellt wird, ist das von Ihnen angewandte CSS. Siehe unten.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

Durch das style-Element im head wird diediv-Größe für Ihre Karte festgelegt.
Legen Sie für die div-Breite und -Höhe einen Wert von mehr als 0px fest, damit die Karte sichtbar ist.
In diesem Fall ist für den div-Bereich eine Höhe von 500 Pixel und eine Breite von 100 % festgelegt, damit die Karte über die gesamte Breite der Webseite dargestellt wird. Wenden Sie auf den div-Bereich background-color: grey an, um den Bereich für Ihre Karte auf der Webseite anzuzeigen.

Schritt 2: Eine Karte mit einem Marker hinzufügen

In diesem Abschnitt erfahren Sie, wie Sie die Google Maps JavaScript API in Ihre Webseite laden und wie Sie Ihr eigenes JavaScript schreiben, das mit der API eine Karte mit einem Marker darauf hinzufügt.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Probieren Sie es selbst aus

Rechts oben im oben gezeigten Feld mit dem Beispielcode befinden sich zwei Schaltflächen. Klicken Sie auf die Schaltfläche ganz links, um das Beispiel in JSFiddle zu öffnen.

Erläuterungen zum Code

Beachten Sie, dass das oben gezeigte Beispiel nicht mehr das CSS enthält, das dazu führte, dass der div-Bereich in Grau dargestellt wurde. Der Grund ist, dass der div-Bereich jetzt eine Karte enthält.

Diese Tabelle dient zur Erläuterung der einzelnen Abschnitte des oben dargestellten Codes.

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

Mit script wird die API aus der angegebenen URL geladen.
Mit dem Parameter callback wird die Funktion initMap ausgeführt, nachdem die API vollständig geladen wurde.
Aufgrund des Attributs async kann der Browser weiter den Rest der Seite wiedergeben, während die API noch geladen wird.
Der Parameter key enthält Ihren API-Schlüssel. Beim Experimentieren mit dieser Anleitung in JSFiddle benötigen Sie keinen eigenen API-Schlüssel. Beachten Sie Schritt 3: API-Schlüssel anfordern mit einer Anleitung dazu, wie Sie später Ihren eigenen API-Schlüssel anfordern.
<script>
  function initMap() {
  }
</script>

Mit der Funktion initMap wird die Karte initialisiert und hinzugefügt, wenn die Webseite geladen wird. Verwenden Sie ein script-Tag, um eigenes JavaScript hinzuzufügen, das die Funktion initMap enthält.
getElementById

Fügen Sie diese Funktion hinzu, um dasdiv-Element auf der Webseite zu finden.
new google.maps.Map()

Fügen Sie dieses neue Google Maps-Objekt hinzu, um eine Karte im div-Element zu erstellen.
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

Fügen Sie der Karte Eigenschaften wie die Mitte und die Vergrößerungsstufe hinzu. Lesen Sie die Dokumentation zu anderen Eigenschaftsoptionen.
Mit der Eigenschaft center wird der API mitgeteilt, wo sich die Mitte der Karte befinden soll, also wo sie zentriert werden soll. Die Kartenkoordinaten werden in der folgenden Reihenfolge festgelegt: Breitengrad, Längengrad.
Mit der Eigenschaft zoom wird die Vergrößerungsstufe für die Karte angegeben. Zoom: Die geringste Vergrößerungsstufe ist 0; mit ihr wird die ganze Erde dargestellt. Um näher an die Erde heranzuzoomen und sie mit höheren Auflösungen anzuzeigen, legen Sie eine höhere Vergrößerungsstufe fest.
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

Fügen Sie diesen Code hinzu, um die Karte mit einem Marker zu versehen. position legt die Position des Markers fest.

Schritt 3: API-Schlüssel anfordern

In diesem Abschnitt wird erläutert, wie Sie Ihre App mit Ihrem eigenen API-Schlüssel gegenüber der Google Maps JavaScript API authentifizieren.

Gehen Sie wie folgt vor, um einen API-Schlüssel anzufordern:

  1. Navigieren Sie zur Google API Console.
  2. Erstellen Sie ein Projekt oder wählen Sie ein Projekt aus.
  3. Klicken Sie auf Continue, um die API und zugehörige Dienste zu aktivieren.
  4. Fordern Sie auf der Seite Credentials einen API-Schlüssel an (und legen Sie die Einschränkungen für den API-Schlüssel fest).

    Hinweis: Wenn Sie bereits über einen API-Schlüssel ohne Einschränkungen oder einen Schlüssel mit Browsereinschränkungen verfügen, können Sie diesen Schlüssel verwenden.

  5. Um Kontingentdiebstahl zu verhindern, schützen Sie Ihren API-Schlüssel mithilfe der folgenden bewährten Methoden.

  6. (Optional) Abrechnung aktivieren. Weitere Informationen finden Sie unter Nutzungsbeschränkungen.

  7. Kopieren Sie den gesamten Code dieser Anleitung von dieser Seite in Ihren Texteditor. Für den Fall, dass Sie noch nicht über einen Texteditor verfügen, hier einige Empfehlungen: Zur Verwendung eignen sich: Notepad++ (für Windows); TextEdit (für macOS); gedit, KWrite und andere (für Linux).
  8. Ersetzen Sie den Wert des Parameters key in der URL durch Ihren eigenen API-Schlüssel (den API-Schlüssel, den Sie gerade erhalten haben).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Speichern Sie die Datei unter einem Namen mit der Dateiendung .html, zum Beispiel google-maps.html.

  10. Laden Sie die HTML-Datei in einen Webbrowser, indem Sie sie von Ihrem Desktop in Ihren Browser ziehen. Alternativ dazu funktioniert bei den meisten Betriebssystemen auch das Doppelklicken auf die Datei.

Tipps und Fehlerbehebung

  • Verwenden Sie die Oberfläche JSFiddle zur Anzeige von HTML-, CSS- und JavaScript-Code in separaten Bereichen. Das Generieren des Codes und die Anzeige der Ausgabe können im Bereich Results erfolgen.
  • Zur Anpassung der Karte können Sie Optionen wie Format und Eigenschaften verändern. Weitere Informationen über die Anpassung von Karten finden Sie unter Maps JavaScript API.
  • Verwenden Sie die Developer Tools Console in Ihrem Webbrowser, um Ihren Code zu testen und zu generieren, Fehlermeldungen zu lesen und Probleme mit Ihrem Code zu lösen.

    Tastenkombinationen für das Öffnen der Konsole in Chrome: Befehl+Wahl+J (auf Mac) oder Strg+Umschalt+J (auf Windows).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API