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. 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 eine Google-Karte auf einer Webseite einzufü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 einer JavaScript- oder TypeScript-Quelldatei ohne das script-Element 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 Laden von Skripts auswählen. In diesem Beispiel wird das Bootstrap-Skript für das dynamische Laden von Skripts 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 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 erforderlich).

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

Vollständiges Codebeispiel

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

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

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

<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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>

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

Karte mithilfe eines div-Elements 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 einer JavaScript- oder TypeScript-Quelldatei ohne das script-Element 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 Laden von Skripts auswählen. In diesem Beispiel wird gezeigt, wie der dynamische Bootstrap 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 div-Element ein, das die Karte enthalten soll.

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

3. Legen Sie im CSS-Code die Höhe von html, body und #map auf 100% fest. Das CSS-Attribut height ist erforderlich, damit die Karte sichtbar ist, da leere div-Elemente standardmäßig die Höhe 0 haben. Da prozentuale Höhen im strikten Modus von übergeordneten Elementen nach unten kaskadieren, wird durch das Festlegen von height: 100% für html und body sowie #map eine ununterbrochene Kette der Höhenvererbung vom Darstellungsbereich bis zum Kartencontainer in allen Browsern sichergestellt.

   html,
   body,
   #map {
     height: 100%;
     margin: 0;
     padding: 0;
   }

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 dem Attribut mapId hinzu. Da die Karte standardmäßig als Rasterkarte angezeigt wird, müssen Sie eine Vektorkarte anfordern, indem Sie die Kartenoption „VECTOR“ angeben. Der Vektorkartentyp wird für die beste Nutzererfahrung empfohlen, da er eine verbesserte visuelle Wiedergabetreue bietet und die Möglichkeit, Neigung und Ausrichtung auf 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

   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

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

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

/* 
 * 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>
    <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: "GOOGLE_MAPS_API_KEY" 
            });
        </script>
    </head>

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

Eigenschaften für die Karteninstanz festlegen und abrufen

Wenn Sie mit der Karteninstanz interagieren möchten, wählen Sie das übergeordnete Element aus. Der Code dafür variiert je nachdem, ob Sie das Element gmp-map oder ein Element div verwendet haben.

Karteninstanz aus einem gmp-map-Element abrufen

Wenn Sie ein gmp-map-Element verwenden, können Sie die Karteninstanz mit document.querySelector abrufen, um eine mapElement-Instanz zu erhalten, 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 mit dem Attribut 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 die 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 die Optionen für die map-Instanz fest, wie hier gezeigt:

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