Markierung auf einer Karte einfügen

Plattform auswählen: Android iOS JavaScript

Mithilfe von Markierungen lassen sich einzelne Standorte auf einer Karte kennzeichnen. Auf dieser Seite werden zwei Methoden zum Einfügen einer Markierung beschrieben – programmatisch und mithilfe von benutzerdefinierten HTML-Elementen.

Bibliothek für erweiterte Markierungen laden

Um auf einer Karte eine erweiterte Markierung einzufügen, muss mithilfe des Kartencodes die marker-Bibliothek geladen werden, die die Klassen AdvancedMarkerElement und PinElement bereitstellt. Dies gilt bei beiden Methoden zum Laden von Markierungen in der App (programmatisch oder mithilfe von HTML). Zuerst muss in der App die Maps JavaScript API geladen werden.

Welche Methode Sie zum Laden von Bibliotheken verwenden, hängt davon ab, wie die Maps JavaScript API auf Ihrer Webseite geladen wird.

  • Werden Scripts für Ihre Webseite dynamisch geladen, fügen Sie die Markierungsbibliothek hinzu und importieren Sie AdvancedMarkerElement (und verwenden Sie optional PinElement) zur Laufzeit, wie hier gezeigt.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Wird für Ihre Webseite das Tag zum direkten Laden von Scripts verwendet, fügen Sie libraries=marker in das Ladescript ein, wie im folgenden Snippet gezeigt. Dadurch werden sowohl AdvancedMarkerElement als auch PinElement importiert.

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

Karten-ID festlegen

Zur Verwendung von erweiterten Markierungen ist eine Karten-ID erforderlich (DEMO_MAP_ID kann genutzt werden). Legen Sie eine Karten-ID in den Kartenoptionen fest:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

Wenn Sie Webkomponenten verwenden, können Sie die Karten-ID direkt im gmp-map-Element festlegen:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

Weitere Informationen zu Karten-IDs

Markierung mithilfe von benutzerdefinierten HTML-Elementen einfügen

Um mithilfe von benutzerdefinierten HTML-Elementen eine erweiterte Markierung einzufügen, fügen Sie dem gmp-map-Element ein untergeordnetes gmp-advanced-marker-Element hinzu. Im folgenden Snippet sehen Sie, wie Markierungen auf einer Webseite eingefügt werden:

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

Vollständigen Quellcode des Beispiels ansehen

In diesem Beispiel wird gezeigt, wie Sie mithilfe von HTML eine Karte mit Markierungen erstellen.

TypeScript

// This example adds a map with markers, using web components.

JavaScript

// This example adds a map with markers, using web components.

CSS

/* Note: This CSS file is intentionally blank. */

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>

Testbeispiel

Markierung programmatisch einfügen

Um eine erweiterte Markierung programmatisch auf einer Karte einzufügen, erstellen Sie ein neues AdvancedMarkerElement und hängen Sie es an die Karte an, wie in diesem Beispiel gezeigt:

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}

Das Anhängen von Elementen ist nur bei Verwendung von Webkomponenten möglich. Wenn das div-Element zum Laden der Karte verwendet wird, verwenden Sie die map-Eigenschaft, um die Markierung der Karteninstanz zuzuordnen:

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

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

Markierung entfernen

Um eine Markierung von der Karte zu entfernen, setzen Sie marker.map oder marker.position auf null.

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

Vollständigen Quellcode des Beispiels ansehen

In diesem Beispiel wird gezeigt, wie einer Karte eine Markierung hinzugefügt wird.

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

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

HTML

<html>
    <head>
        <title>Default Advanced Marker</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="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>

Testbeispiel

Nächste Schritte