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:

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.

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 Skriptladen-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

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.

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

Vollständiges Codebeispiel

TypeScript

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

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();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>
        <!-- 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>
    </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

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

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

Fügen Sie auf der HTML-Seite ein div-Element ein, das die Karte enthalten soll.
```
<div id="map"></div>
```
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%;
}
```

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

TypeScript

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

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

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();index.js

Vollständigen Quellcode des Beispiels ansehen

TypeScript

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

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

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
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>

    <!-- 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>
</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 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,
});

Google-Karte auf einer Webseite einfügen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Übersicht

Karte mithilfe eines gmp-map-Elements einfügen

Vollständiges Codebeispiel

TypeScript

JavaScript

CSS

HTML

Testbeispiel

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

TypeScript

JavaScript

Vollständigen Quellcode des Beispiels ansehen

TypeScript

JavaScript

CSS

HTML

Testbeispiel

Eigenschaften für die Karteninstanz festlegen und abrufen

Karteninstanz aus einem gmp-map-Element abrufen

Karteninstanz aus einem div-Element abrufen

Google-Karte auf einer Webseite einfügen

Karte mithilfe eines `gmp-map`-Elements einfügen

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

Karteninstanz aus einem `gmp-map`-Element abrufen

Karteninstanz aus einem `div`-Element abrufen