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 } = 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', });

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="43.4142989,-124.2301242"   zoom="4"   map-id="DEMO_MAP_ID"   style="height: 400px" >   <gmp-advanced-marker     position="37.4220656,-122.0840897"     title="Mountain View, CA"   ></gmp-advanced-marker>   <gmp-advanced-marker     position="47.648994,-122.3503845"     title="Seattle, WA"   ></gmp-advanced-marker> </gmp-map>
index.html

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. async function initMap(): Promise<void> {     console.log('Maps JavaScript API loaded.'); } declare global {     interface Window {       initMap: () => void;     }   } window.initMap = initMap;
index.ts

JavaScript

// This example adds a map with markers, using web components. async function initMap() {   console.log("Maps JavaScript API loaded."); }  window.initMap = 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; }  gmp-map {   height: 400px; } 
style.css

HTML

<html>   <head>     <title>Add a Map with Markers using HTML</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <gmp-map       center="43.4142989,-124.2301242"       zoom="4"       map-id="DEMO_MAP_ID"       style="height: 400px"     >       <gmp-advanced-marker         position="37.4220656,-122.0840897"         title="Mountain View, CA"       ></gmp-advanced-marker>       <gmp-advanced-marker         position="47.648994,-122.3503845"         title="Seattle, WA"       ></gmp-advanced-marker>     </gmp-map>      <!--        The `defer` attribute causes the script to execute after the full HTML       document has been parsed. For non-blocking uses, avoiding race conditions,       and consistent behavior across browsers, consider loading using Promises. See       https://developers.google.com/maps/documentation/javascript/load-maps-js-api       for more information.       -->     <script       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"       defer     ></script>   </body> </html>
index.html

Testbeispiel

Markierung programmatisch einfügen

Um eine erweiterte Markierung programmatisch auf einer Karte einzufügen, erstellen Sie ein neues AdvancedMarkerElement, mit dem entweder ein LatLng- oder LatLngAltitude-Wert übergeben wird, und einen Verweis auf die Basiskarte, wie in diesem Beispiel gezeigt:

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

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

Vollständigen Quellcode des Beispiels ansehen

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

TypeScript

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 map = new Map(document.getElementById('map') as HTMLElement, {         center: { lat: 37.4239163, lng: -122.0947209 },         zoom: 14,         mapId: '4504f8b37365c3d0',     });      const marker = new AdvancedMarkerElement({         map,         position: { lat: 37.4239163, lng: -122.0947209 },     }); } initMap();
index.ts

JavaScript

async function initMap() {     // Request needed libraries.     const { Map } = await google.maps.importLibrary("maps");     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");     const map = new Map(document.getElementById('map'), {         center: { lat: 37.4239163, lng: -122.0947209 },         zoom: 14,         mapId: '4504f8b37365c3d0',     });     const marker = new AdvancedMarkerElement({         map,         position: { lat: 37.4239163, lng: -122.0947209 },     }); } 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>Default Advanced Marker</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div id="map"></div>      <!-- 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> </html>
index.html

Testbeispiel

Nächste Schritte