Google-Karte mit einer Markierung auf Ihrer Website einfügen

Einführung

In dieser Anleitung erfahren Sie, wie Sie einer Webseite eine einfache Google-Karte mit einer Markierung hinzufügen. Sie eignet sich für HTML- und CSS-Einsteiger oder Nutzer mit entsprechenden Vorkenntnissen, die über Grundkenntnisse in JavaScript verfügen. Einen Leitfaden zum Erstellen von Karten für fortgeschrittene Nutzer finden Sie im Entwicklerhandbuch.

Unten sehen Sie die Karte, die Sie mit dieser Anleitung erstellen. Die Markierung befindet sich am Uluru (auch als Ayers Rock bezeichnet) im Uluṟu-Kata-Tjuṯa-Nationalpark.

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

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Testbeispiel

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Erste Schritte

Um eine Google-Karte mit einer Markierung auf Ihrer Webseite einzufügen, sind drei Schritte erforderlich:

HTML-Seite erstellen
Karte mit Markierung hinzufügen
API-Schlüssel anfordern

Sie benötigen einen Webbrowser. Wählen Sie aus der Liste der unterstützten Browser einen gängigen Browser wie Google Chrome (empfohlen), Firefox, Safari oder Edge für Ihre Plattform aus.

Schritt 1: HTML-Seite erstellen

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

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Hinweis: Dies ist eine sehr einfache Seite mit einer Überschrift 3. Ordnung (h3) und einem einzelnen div-Element. Sie können der Webseite beliebige Inhalte hinzufügen.

Den Code verstehen

Mit dem folgenden Code wird eine HTML-Seite erstellt, die aus einem head- und einem body-Element besteht.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Mit dem Code unten können Sie eine Überschrift 3. Ordnung oberhalb der Karte einfügen.

<h3>My Google Maps Demo</h3>

Der folgende Code definiert einen Bereich der Seite für die Google-Karte.

<!--The div element for the map -->
<div id="map"></div>

In dieser Phase der Anleitung wird das div-Element nur als grauer Block angezeigt, da Sie noch keine Karte hinzugefügt haben. Der folgende Code beschreibt die CSS-Attribute, über die Größe und Farbe von div festgelegt werden.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

Im Code oben wird über das style-Element die Größe von div für die Karte festgelegt. Die Breite und Höhe von div müssen auf mehr als 0 px festgelegt werden, damit die Karte sichtbar ist. In unserem Fall ist für das div-Element eine Höhe von 400 px und eine Breite von 100 % festgelegt, damit die Karte über die gesamte Breite der Webseite angezeigt wird.

Schritt 2: Karte mit Markierung hinzufügen

Hier erfahren Sie, wie Sie die Maps JavaScript API in Ihre Webseite laden und eigenen JavaScript-Code schreiben, um mithilfe der API eine Karte mit einer Markierung einzufügen.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Testbeispiel

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Den Code verstehen

Im folgenden Code lädt das script die API von der angegebenen URL.

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

Im Code oben führt der Parameter callback die Funktion initMap aus, nachdem die API geladen wurde. Mit dem Attribut async kann der Browser den Rest Ihrer Seite weiter parsen, während die API geladen wird. Sobald sie geladen ist, pausiert der Browser und führt sofort das Skript aus. Der Parameter key enthält Ihren API-Schlüssel.

Eine Anleitung zum Abrufen eines eigenen API-Schlüssels finden Sie unter Schritt 3: API-Schlüssel anfordern.

Der folgende Code enthält die Funktion initMap, die beim Laden der Webseite initialisiert und die Karte hinzufügt. Sie können ein script-Tag verwenden, um eigenen JavaScript-Code mit der Funktion initMap anzugeben.

  function initMap() {}

Fügen Sie die Funktion document.getElementById() hinzu, um das div-Element der Karte auf der Webseite zu finden.

Mit dem folgenden Code wird ein neues Google-Kartenobjekt erstellt. Außerdem werden der Karte Eigenschaften hinzugefügt, einschließlich des Mittelpunkts und der Zoomstufe. Weitere Optionen für Eigenschaften sind in der Dokumentation verfügbar.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

Im Code oben erstellt new google.maps.Map() ein neues Google-Kartenobjekt. Mit der Eigenschaft center wird der API mitgeteilt, wo sich der Mittelpunkt der Karte befinden soll.

Weitere Informationen zum Abrufen von Breiten- und Längengraden oder Umwandeln von Adressen in geografische Koordinaten

Mit der Eigenschaft zoom wird die Zoomstufe der Karte festgelegt. Die geringste Stufe ist „Zoom: 0“. Hier wird die gesamte Erde dargestellt. Um heranzuzoomen und die Erde in höherer Auflösung zu sehen, müssen Sie eine höhere Zoomstufe festlegen.

Mit dem Code unten wird eine Markierung auf der Karte platziert. Die Eigenschaft position legt die Position der Markierung fest.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

Weitere Informationen zu Markierungen:

Schritt 3: API-Schlüssel anfordern

In diesem Abschnitt wird erläutert, wie Sie Ihre Anwendung mit Ihrem eigenen API-Schlüssel bei der Maps JavaScript API authentifizieren können.

So fordern Sie einen API-Schlüssel an:

Rufen Sie die Google Cloud Console auf.
Erstellen Sie ein neues Projekt oder wählen Sie ein vorhandenes Projekt aus.
Klicken Sie auf Weiter, um die API und die zugehörigen Dienste zu aktivieren.
Fordern Sie auf der Seite Anmeldedaten einen API-Schlüssel an und legen Sie die Einschränkungen für den API-Schlüssel fest. Wenn Sie bereits einen API-Schlüssel ohne Einschränkungen oder einen Schlüssel mit Browsereinschränkungen haben, können Sie auch diesen verwenden.
Informationen zum Verhindern von Kontingentdiebstahl und zum Sichern Ihres API-Schlüssels finden Sie unter Mit API-Schlüsseln authentifizieren.
Aktivieren Sie die Abrechnung. Weitere Informationen finden Sie unter Nutzung und Abrechnung.
Kopieren Sie den gesamten Code dieser Anleitung von dieser Seite in Ihren Texteditor.
Ersetzen Sie den Wert des Parameters key in der URL durch Ihren eigenen API-Schlüssel (also den API-Schlüssel, den Sie gerade erhalten haben).
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```
Speichern Sie diese Datei unter einem Namen, der auf .html endet, z. B. index.html.
Laden Sie die HTML-Datei in einen Webbrowser. Ziehen Sie sie dazu von Ihrem Desktop in Ihren Browser. Bei den meisten Betriebssystemen können Sie auch doppelt auf die Datei klicken.

Tipps und Fehlerbehebung

Optionen wie Stil und Eigenschaften lassen sich anpassen, um die Karte individuell zu gestalten. Weitere Informationen zum Anpassen von Karten finden Sie unter Cloudbasiertes Gestalten von Karteninhalten und Auf Karten zeichnen.
Verwenden Sie die Entwicklertools-Konsole in Ihrem Webbrowser, um Ihren Code zu testen und auszuführen, Fehlerberichte zu lesen und Probleme mit dem Code zu beheben.
Mit den folgenden Tastenkombinationen können Sie die Konsole in Chrome aufrufen:
Befehlstaste + Optionstaste + J (Mac) oder Strg + Umschalttaste + J (Windows).
Führen Sie die folgenden Schritte aus, um die Breiten- und Längengrade für einen Ort in Google Maps abzurufen.
1. Öffnen Sie Google Maps in einem Browser.
2. Klicken Sie mit der rechten Maustaste auf die genaue Position auf der Karte, für die Sie Koordinaten benötigen.
3. Wählen Sie im Kontextmenü, das eingeblendet wird, Was ist hier? aus. Unten auf dem Bildschirm wird eine Infokarte eingeblendet. Die Breiten- und Längengrade finden Sie in der letzten Zeile der Infokarte.
Mit dem Geocoding-Dienst können Sie eine Adresse in Breiten- und Längengrade umwandeln. Ausführliche Informationen zu den ersten Schritten mit dem Geocoding-Dienst finden Sie in den Entwicklerleitfäden.