JavaScript: Google Maps über API einbinden

Mit der JavaScript-API für Karten können Sie Karten mit Ihren eigenen Inhalten und Bildern für die Anzeige auf Webseiten und mobilen Geräten anpassen. Die Maps JavaScript API bietet vier grundlegende Kartentypen (Straßenkarte, Satellit, Hybrid und Gelände), die Sie mithilfe von Ebenen und Stilen, Steuerelementen und Ereignissen sowie verschiedenen Diensten und Bibliotheken anpassen können.

Wer Google Maps für kommerzielle Zwecke nutzen will, muss laut Google AGBs, die Karten über die API einbinden. Dieser Artikel zeigt die Grundlagen der Google Maps API und wie man diese mit JavaScript einbindet.

Neben diesem der Einbindung von Google Maps über die offizelle API, steht zusätzlich die Möglichkeit zur Verfügung Google Maps über die Funktion „URL zu dieser Karte“ als sogenannter iframe in der eigenen Webseite zu integrieren.

Dieses einfache Verfahren ist jedoch nur für nicht-kommerzielle Zwecke gedacht. Möchten Sie Google Maps kommerziell nutzen, müssen Sie die Einbindung über die API vornehmen!

Ein weiterer Vorteil. Nutzen Sie Google Maps über die API, können Sie zusätzlich auf viele Funktionen der API zurückgreifen und letztendlich sogar eigene Google Maps Anwendungen entwickeln.

1. Google API-Key (Entwickler Key) besorgen

Für das Arbeiten mit der Google Maps API benötigt man einen Entwickler-Key, auch API-Key genannt. Diesen Key kann man sich kostenlos auf der Google Maps JavaScript API Seite besorgen, wo man schnell und einfach einen Key anfordert. Name oder Anschrift muss nicht hinterlassen werden. Der Key ist jedoch immer nur für eine URL gültig. Sind Sie im Besitz eines gültigen API-Keys kann es auch schon losgehen.

2. API-Key einbinden

Die Grundlage für jedes Arbeiten mit Google Maps ist die Einbindung Ihres Keys im Head-Bereich der HTML-Seite. Unterhalb sehen Sie die Einbindung über JavaScript. Die Variable IHR_KEY ist natürlich durch Ihren eigenen Key zu ersetzen. Der Ausdruck v=2 gibt an, welche Version der API Sie von Google anfordern möchten.

3. Karte einbinden

Im ersten Schritt möchten wir eine einfache Karte von einem uns gewünschten Zielort auf der Webseite einbinden. Dazu verwenden wir im ersten Schritt einmal den Code den uns Google Maps auch bei der Anforderung eines Google API-Keys vorschlägt.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src=""></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly"
      async
    ></script>
  </body>
</html>

/* 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;
}

let map;

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