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.

• Markierung mithilfe von benutzerdefinierten HTML-Elementen einfügen
• Markierung programmatisch einfügen

Bibliothek für erweiterte Markierungen laden

Wenn Sie einer Karte eine erweiterte Markierung hinzufügen möchten, muss im Kartencode die Bibliothek marker 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 in das Ladescript libraries=marker 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 verwendet werden). Legen Sie eine Karten-ID in den Kartenoptionen fest, wie hier gezeigt:

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 für das 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

Hinweis: Einige Frameworks wie React fügen während des Renderings automatisch DOM-Knoten hinzu und entfernen sie wieder. Sie sind möglicherweise nicht mit dem unabhängigen Hinzufügen und Entfernen der entsprechenden DOM-Knoten von Markierungen kompatibel (z. B. bei Verwendung von Konstruktoren und Eigenschaften der Maps JavaScript API). Wenn Sie in solchen Frameworks anderen Code oder andere Bibliotheken zur Verwaltung von Markierungen verwenden möchten, müssen Sie Markierungen möglicherweise ausschließlich mit der JavaScript-Syntax hinzufügen und entfernen (z.B. new AdvancedMarker({map})).

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>
index.html

Vollständigen Quellcode des Beispiels ansehen

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

TypeScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();
index.ts

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

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
    console.log('Maps JavaScript API loaded.');
}
initMap();
index.js

CSS

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

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
            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="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>
index.html

Testbeispiel

JSFiddle.net

Markierung programmatisch einfügen

Um eine erweiterte Markierung programmatisch auf einer Karte einzufügen, erstellen Sie ein neues AdvancedMarkerElement und fügen Sie es der Karte hinzu, wie in diesem Beispiel gezeigt:

TypeScript

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

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

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

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.js

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, wie hier gezeigt:

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 entweder 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') as google.maps.MapElement;

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

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

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

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();
index.js

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;
}
style.css

HTML

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

Testbeispiel

JSFiddle.net

Nächste Schritte

• Einfache Anpassung von Markierungen