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.


TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();

CSS

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

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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>

Testbeispiel

Erste Schritte

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

  1. HTML-Seite erstellen
  2. Karte mit Markierung hinzufügen
  3. 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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</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.

/* 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.

Das Bootstrap-Ladeprogramm bereitet die Maps JavaScript API für das Laden vor. Es werden keine Bibliotheken geladen, bis importLibrary() aufgerufen wird.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>

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

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
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();

Im Code oben werden die Bibliotheken Map und AdvancedMarkerView geladen, wenn die Funktion initMap() aufgerufen wird.

Den Code verstehen

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 position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

Im Code oben erstellt new 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 AdvancedMarkerView({
  map: map,
  position: position,
  title: 'Uluru'
});

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerView({
  map: map,
  position: position,
  title: "Uluru",
});

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:

  1. Rufen Sie die Google Cloud Console auf.

  2. Erstellen Sie ein neues Projekt oder wählen Sie ein vorhandenes Projekt aus.

  3. Klicken Sie auf Weiter, um die API und die zugehörigen Dienste zu aktivieren.

  4. 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.

  5. Informationen zum Verhindern von Kontingentdiebstahl und zum Sichern Ihres API-Schlüssels finden Sie unter Mit API-Schlüsseln authentifizieren.

  6. Aktivieren Sie die Abrechnung. Weitere Informationen finden Sie unter Nutzung und Abrechnung.

  7. Kopieren Sie den gesamten Code dieser Anleitung von dieser Seite in Ihren Texteditor.

  8. 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>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY_HERE",
        // Add other bootstrap parameters as needed, using camel case.
        // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
      });
    </script>
    
  9. Speichern Sie diese Datei unter einem Namen, der auf .html endet, z. B. index.html.

  10. 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.