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.

• Karte mithilfe eines gmp-map-Elements einfügen
• Karte mithilfe eines div-Elements und mit JavaScript einfügen
• Eigenschaften für die Karteninstanz festlegen und abrufen

Ü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 das Bootstrap-Ladeprogramm 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 das Bootstrap für das dynamische Laden von Skripts einer HTML-Seite hinzugefü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 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).

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>
index.html

Vollständiges Codebeispiel

TypeScript

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.js

CSS

/* 
 * 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>
        <script>
            // prettier-ignore
            (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"
            });
        </script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
index.html

Testbeispiel

JSFiddle.net

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

Hinweis :Dieser Ansatz wird weiterhin vollständig unterstützt und von einigen Entwicklern bevorzugt. Wir empfehlen jedoch, für neue Projekte und moderne Integrationen die deklarative gmp-map-Webkomponente in Betracht zu ziehen.

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 das Bootstrap-Ladeprogramm 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 JS- oder TS-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 mapId hinzu. Da standardmäßig eine Rasterkarte verwendet wird, müssen Sie eine Vektorkarte anfordern, indem Sie die Kartenoption „VECTOR“ angeben. Der Vektorkartentyp wird für eine optimale Nutzerfreundlichkeit empfohlen, da er eine bessere visuelle Darstellung sowie die Möglichkeit bietet, Neigung und Ausrichtung der Karte zu steuern.

   TypeScript

   let map: google.maps.Map;
   async function init(): Promise<void> {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map')!, {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.ts

   Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

   JavaScript

   let map;
   async function init() {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.js

Vollständigen Quellcode des Beispiels ansehen

TypeScript

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
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>

        <script>
            // prettier-ignore
            (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" 
            });
        </script>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>
index.html

Testbeispiel

JSFiddle.net

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. Greifen Sie über die Property MapElement.innerMap auf die Klasse Map 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,
});