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:

  • Die Maps JavaScript API wird mit einem Bootstrap-Ladeprogramm geladen. Dabei 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 einer JavaScript- oder TypeScript-Quelldatei hinzu. Konfigurieren Sie das Bootstrap-Ladeprogramm mit Ihrem API-Schlüssel und weiteren Optionen (sofern erforderlich). Sie können entweder den dynamischen Bibliotheksimport oder das direkte Skriptladen auswählen. In diesem Beispiel wird das Bootstrap-Ladeprogramm für das direkte Skriptladen einer HTML-Seite hinzugefügt:

    <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 gegebenenfalls eine map-id an. Die map-id ist für einige Funktionen wie erweiterte Markierungen erforderlich. Das CSS-Attribut height ist erforderlich, damit die Karte sichtbar ist. Es kann entweder im HTML- oder im CSS-Code angegeben werden. In diesem Beispiel wird das Stilattribut height zur Vereinfachung im HTML-Code angegeben.

    <gmp-map
    center="37.4220656,-122.0840897"
    zoom="10"
    map-id="DEMO_MAP_ID"
    style="height: 500px"></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>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="37.4220656,-122.0840897"
            zoom="10"
            map-id="DEMO_MAP_ID"
            style="height: 500px"></gmp-map>
    </body>
</html>
index.html

Karte mithilfe eines div-Elements (Legacy) 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 einer JavaScript- oder TypeScript-Quelldatei hinzu. Konfigurieren Sie das Bootstrap-Ladeprogramm mit Ihrem API-Schlüssel und weiteren Optionen (sofern erforderlich). Sie können entweder den dynamischen Bibliotheksimport oder das direkte Skriptladen auswählen. In diesem Beispiel wird das dynamische Bootstrap-Ladeprogramm einer HTML-Seite hinzugefügt:

    <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 mit der Eigenschaft map-id eine Karten-ID hinzu. Da die Karte standardmäßig als Rasterkarte angezeigt wird, fordern Sie eine Vektorkarte an, indem Sie die Kartenoption renderingType: google.maps.RenderingType.VECTOR angeben. Der Vektorkartentyp wird für eine optimale Nutzerfreundlichkeit empfohlen, da er eine verbesserte visuelle Genauigkeit sowie die Möglichkeit bietet, die Neigung und die Ausrichtung auf der Karte zu steuern.

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

Vollständiges Codebeispiel

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    const { Map, RenderingType } = (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,
        renderingType: RenderingType.VECTOR,
    });
}

initMap();
index.ts

JavaScript

let map;
async function initMap() {
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: RenderingType.VECTOR,
    });
}
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", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_core-maps" });</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 hierfür variiert je nachdem, ob Sie das gmp-map-Element oder ein div-Element verwendet haben.

Karteninstanz aus einem gmp-map-Element abrufen

Wenn Sie eine Karteninstanz mit einem gmp-map Element abrufen möchten, verwenden Sie document.querySelector um eine mapElement Instanz abzurufen, wie hier gezeigt.

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

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

mapElement.zoom = 8;

Die MapElement-Klasse verwendet intern die Map-Klasse. Greifen Sie mit der Eigenschaft MapElement.innerMap auf die Map-Klasse zu, 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,
});