Google-Karte mit einer Markierung mithilfe von JavaScript hinzufü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 Grundkenntnisse in JavaScript haben.

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.

Überblick und Webbrowser

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

  1. API-Schlüssel anfordern
  2. HTML-Seite erstellen
  3. Karte mit Markierung hinzufügen

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: 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. Nachdem Sie einen API-Schlüssel erhalten haben, klicken Sie auf „YOUR_API_KEY“, um ihn in das folgende Snippet einzufügen. Sie können das Bootloader-Skript-Tag kopieren und einfügen, um es selbst zu verwenden. Webseite.

    <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",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Schritt 2: 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>

    <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: "weekly"});</script>
  </body>
</html>

index.html

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

Code verstehen

In dieser Phase des Beispiels haben wir Folgendes:

  • Die Anwendung wurde mithilfe der Deklaration !DOCTYPE html als HTML5 deklariert.
  • Es wurde ein div-Element namens "map" erstellt. um die Karte zu halten.
  • Die Maps JavaScript API wurde mit dem Bootstrap-Ladeprogramm geladen.

Anwendung als HTML5 deklarieren

Wir empfehlen, dass Sie ein echtes DOCTYPE-Element innerhalb Ihrer Webanwendung deklarieren. In diesem Beispiel haben wir die Anwendungen mithilfe der Methode einfaches HTML5-DOCTYPE wie unten gezeigt:

<!DOCTYPE html>

Die meisten aktuellen Browser rendern Inhalte, die mit diesem DOCTYPE deklariert sind im Standardmodus Das bedeutet, dass Ihre Anwendung browserübergreifend konform sind. Das DOCTYPE ist außerdem für eine Graceful Degradation ausgelegt. Browser, die ihn nicht verstehen, ignorieren ihn und verwenden den Quirks-Modus. bis ihre Inhalte anzuzeigen.

Bestimmte CSS, die im Quirks-Modus funktionieren, sind im Standardmodus nicht gültig. Insbesondere müssen alle prozentualen Größen von übergeordneten Blockelementen übernommen werden. Wenn für einen der Ancestors keine Größe angegeben ist, wird davon ausgegangen, dass er eine Größe von 0 × 0 Pixeln hat. Für Deshalb wird die folgende style-Deklaration mit aufgenommen:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

div-Element erstellen

Damit die Karte auf einer Webseite angezeigt werden kann, muss ein Platz für sie reserviert werden. Häufig Dazu erstellen wir ein benanntes div-Element und erhalten einen Verweis darauf -Element im Document Object Model (DOM) des Browsers.

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. Beachten Sie, dass div-Elemente normalerweise ihre Breite aus ihrem Element entfernen und leere div-Elemente haben in der Regel eine Höhe von 0. In diesem Fall müssen Sie immer explizit eine Höhe für div festlegen.

Maps JavaScript API laden

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",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

Schritt 3: 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 { AdvancedMarkerElement } = 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 AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

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 { AdvancedMarkerElement } = 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 AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

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

Code verstehen

In dieser Phase der Anleitung haben wir Folgendes getan:

  • Es wurde eine JavaScript-Funktion definiert, die eine Karte im div-Element erstellt.
  • Es wurde ein AdvancedMarkerElement zum Hinzufügen einer Markierung zur Karte erstellt.

Karte hinzufügen

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 { AdvancedMarkerElement } = 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',
  }
);
index.ts

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 { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

index.js

Für jede Karte sind zwei Optionen erforderlich: center und zoom. Im obigen Beispiel erstellt new Map() ein neues Google-Kartenobjekt. Mit dem Attribut center teilen Sie der API, wo die Karte zentriert werden soll.

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.

Eine Karte der gesamten Erde als einzelnes Bild anzubieten, würde entweder ein riesige Karte oder eine kleine Karte mit sehr geringer Auflösung. Daher werden Kartenbilder in Google Maps und der Maps JavaScript API in Kartenkacheln unterteilt sind. und „Zoomstufen“. Bei niedrigen Zoomstufen deckt ein kleiner Satz Kartenkacheln ein Bereich bei höheren Zoomstufen haben die Kacheln eine höhere Auflösung und decken ein kleineren Bereich. Die folgende Liste zeigt die ungefähre Detailebene, die Sie erwarten Sie bei jeder Zoomstufe:

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

Die folgenden drei Bilder zeigen denselben Standort in Tokio auf Zoomstufe 0, 7 und 18.

Markierung hinzufügen

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 AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

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

Vollständiges Codebeispiel

Den vollständigen Beispielcode finden Sie hier:

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 { AdvancedMarkerElement } = 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 AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

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 { AdvancedMarkerElement } = 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 AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

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

style.css

HTML

<html>
  <head>
    <title>Add Map</title>

    <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: "weekly"});</script>
  </body>
</html>
index.html

Testbeispiel

Weitere Informationen zu Markierungen:

Tipps und Fehlerbehebung

  • Weitere Informationen zum Abrufen von Breiten- und Längengraden Koordinaten ändern oder eine Adresse in geografische Koordinaten umwandeln.
  • 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 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).

  • So rufen Sie die Breiten- und Längengrade für einen Ort in Google Maps ab:

    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.