Google-Karte auf einer Webseite einfügen

Beim Einfügen einer Google-Karte auf einer Webseite können Sie zwischen drei Methoden wählen: HTML, CSS und JavaScript-Code. Auf dieser Seite wird beschrieben, wie Sie einer Webseite eine Karte hinzufügen und dann programmatisch auf die Karteninstanz zugreifen.

Übersicht

Zum Laden einer Karte auf Ihrer Webseite sind folgende Schritte erforderlich:

  • Laden Sie die Maps JavaScript API mit einem Bootstrap-Ladeprogramm. Hier wird Ihr API-Schlüssel übergeben. Dieser Schritt kann in die HTML- oder JavaScript-Quelldatei eingefügt werden.
  • Die Karte wird auf der HTML-Seite eingefügt und die erforderlichen CSS-Stile werden hinzugefügt.
  • Die maps-Bibliothek wird geladen und die Karte wird initialisiert.

Karte mithilfe eines gmp-map-Elements einfügen

Das gmp-map-Element ist die bevorzugte Methode, um einer Webseite eine Google-Karte hinzuzufügen. Es ist ein benutzerdefiniertes HTML-Element, das mithilfe von Webkomponenten erstellt wird. Um mithilfe eines gmp-map-Elements eine Karte auf einer Webseite einzufügen, führen Sie die nachfolgenden Schritte aus.

  1. Fügen Sie einer HTML-Seite ein script-Element mit dem Bootstrap-Ladeprogramm hinzu oder fügen Sie es ohne das script-Element in eine JavaScript- oder TypeScript-Quelldatei ein. Konfigurieren Sie den Bootstrap-Loader mit Ihrem API-Schlüssel und allen anderen Optionen. Sie können entweder den dynamischen Import von Bibliotheken oder das direkte Laden von Skripten auswählen. In diesem Beispiel wird gezeigt, wie das Bootstrap für das direkte Laden von Skripts einer HTML-Seite hinzugefügt wird:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

    Weitere Informationen zum Laden der Google Maps JavaScript API

  2. Fügen Sie auf der HTML-Seite ein gmp-map-Element ein. Geben Sie die Koordinaten (Breiten- und Längengrad) für center (erforderlich), einen Zoomwert für zoom (erforderlich) und bei Bedarf eine map-id an (für einige Funktionen wie erweiterte Markierungen ist sie erforderlich). Das CSS-Attribut height ist erforderlich, damit die Karte sichtbar ist. Sie kann entweder in HTML oder CSS angegeben werden. In diesem Beispiel wird das Stilattribut height aus Gründen der Einfachheit im HTML-Code angegeben.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

Vollständiges Codebeispiel

<html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></gmp-map>
   <!-- 
      The `defer` attribute causes the script 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. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Karte mithilfe eines div-Elements (alt) und mit JavaScript einfügen

Um mithilfe eines div-Elements eine Karte auf einer Webseite einzufügen, führen Sie die nachfolgenden Schritte aus.

  1. Fügen Sie einer HTML-Seite ein script-Element mit dem Bootstrap-Ladeprogramm hinzu oder fügen Sie es ohne das script-Element in eine JavaScript- oder TypeScript-Quelldatei ein. Konfigurieren Sie den Bootstrap-Loader mit Ihrem API-Schlüssel und allen anderen Optionen. Sie können entweder den dynamischen Bibliotheksimport oder das direkte Laden von Skripten auswählen. In diesem Beispiel wird gezeigt, wie der dynamische Bootstrap-Code in eine HTML-Seite eingefügt 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>

    Weitere Informationen zum Laden der Google Maps JavaScript API

  2. Fügen Sie auf der HTML-Seite ein div-Element ein, das die Karte enthalten soll.

    <div id="map"></div>

  3. Legen Sie die Kartenhöhe im CSS-Code auf 100 % fest. Das CSS-Attribut height ist erforderlich, damit die Karte sichtbar ist.

    #map {
  height: 100%;
}

  4. Erstellen Sie in der JavaScript-Datei eine Funktion zum Laden der maps-Bibliothek und zum Initialisieren der Karte. Geben Sie die Koordinaten (Breiten- und Längengrad) für center und eine Zoomstufe für zoom an. Fügen Sie bei Bedarf eine Karten-ID mit der Eigenschaft map-id hinzu.

    let map;
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
    index.js

Vollständiges Codebeispiel

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
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>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Testbeispiel

Eigenschaften für die Karteninstanz festlegen und abrufen

Wenn Sie mit der Karteninstanz interagieren möchten, wählen Sie das enthaltende Element aus. Der Code dafür hängt davon ab, ob Sie das gmp-map- oder das div-Element verwendet haben.

Karteninstanz aus einem gmp-map-Element abrufen

Wenn Sie ein gmp-map-Element verwenden, rufen Sie die Karteninstanz mit document.querySelector ab, um eine mapElement-Instanz abzurufen, wie hier gezeigt.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Legen Sie dann Attribute für die mapElement-Instanz fest:

mapElement.zoom = 8;

Die Klasse MapElement verwendet intern die Klasse Map. Sie können auf die Klasse Map über die Property MapElement.innerMap zugreifen, wie hier gezeigt:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Karteninstanz aus einem div-Element abrufen

Wenn Sie ein div-Element verwenden, rufen Sie die Karteninstanz ab und legen Sie Optionen bei der Initialisierung fest:

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

Legen Sie nach der Initialisierung Optionen für die map-Instanz fest, wie hier gezeigt:

map.setOptions({
    zoom: 8,
});