Dodawanie znacznika do mapy

Wybierz platformę: Android iOS JavaScript

Używaj znaczników, aby wyświetlać pojedyncze lokalizacje na mapie. Na tej stronie dowiesz się, jak dodać znacznik do mapy automatycznie i za pomocą niestandardowych elementów HTML.

• Dodawanie znacznika za pomocą niestandardowych elementów HTML
• Dodawanie znacznika automatycznie

Wczytywanie biblioteki znaczników zaawansowanych

Aby dodać do mapy znacznik zaawansowany, kod mapy musi wczytać bibliotekę marker, która udostępnia klasy AdvancedMarkerElement i PinElement. Dotyczy to zarówno sytuacji, gdy aplikacja wczytuje znaczniki automatycznie, jak i gdy używa do tego kodu HTML. Aby to zrobić, aplikacja musi najpierw wczytać interfejs Maps JavaScript API.

Metoda używana do wczytywania bibliotek zależy od tego, jak strona internetowa wczytuje interfejs Maps JavaScript API.

• Jeśli Twoja strona internetowa korzysta z dynamicznego wczytywania skryptów, dodaj bibliotekę znaczników i zaimportuj AdvancedMarkerElement (oraz opcjonalnie PinElement) w czasie działania, jak pokazano tutaj.

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

• Jeśli Twoja strona internetowa używa tagu bezpośredniego wczytywania skryptu, dodaj libraries=marker do skryptu wczytywania, jak pokazano w tym fragmencie kodu. Spowoduje to zaimportowanie zarówno AdvancedMarkerElement, jak i PinElement.

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

Ustawianie identyfikatora mapy

Do używania zaawansowanych znaczników wymagany jest identyfikator mapy (można użyć DEMO_MAP_ID). Ustaw identyfikator mapy w opcjach mapy, jak pokazano tutaj:

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

Jeśli używasz komponentów internetowych, możesz ustawić identyfikator mapy bezpośrednio w elemencie gmp-map:

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

Więcej informacji o identyfikatorach map.

Dodawanie znacznika za pomocą niestandardowych elementów HTML

Uwaga: niektóre platformy, takie jak React, automatycznie dodają i usuwają węzły DOM podczas renderowania i mogą być niezgodne z niezależnym dodawaniem i usuwaniem węzłów DOM odpowiadających znacznikom (np. podczas korzystania z konstruktorów i właściwości Maps JavaScript API). Jeśli w takich platformach zamierzasz używać innego kodu lub innych bibliotek do zarządzania znacznikami, może być konieczne dodawanie i usuwanie znaczników wyłącznie przy użyciu składni JavaScriptu (np. new AdvancedMarker({map})).

Aby dodać znacznik zaawansowany za pomocą niestandardowych elementów HTML, dodaj element podrzędny gmp-advanced-marker do elementu gmp-map. Poniższy fragment kodu pokazuje, jak dodać znaczniki do strony internetowej:

<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

Zobacz kompletny przykładowy kod źródłowy

Ten przykład pokazuje, jak utworzyć mapę ze znacznikami za pomocą kodu HTML.

TypeScript

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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

JavaScript

// This example adds a map with markers, using web components.
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
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&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>
index.html

Dodawanie znacznika automatycznie

Aby dodać do mapy znacznik zaawansowany za pomocą kodu, utwórz nowy element AdvancedMarkerElement i dołącz go do mapy, jak pokazano w tym przykładzie:

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);
}
index.ts

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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);
}
index.js

Dołączanie elementów jest możliwe tylko w przypadku komponentów internetowych. Jeśli do wczytania mapy używany jest element div, użyj właściwości map, aby powiązać znacznik z instancją mapy, jak pokazano tutaj:

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

Usuwanie znacznika

Aby usunąć znacznik z mapy, ustaw marker.map lub marker.position na null.

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

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

Zobacz kompletny przykładowy kod źródłowy

Ten przykład pokazuje, jak dodać znacznik do mapy.

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();
index.ts

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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();
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>
        <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="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

Dalsze kroki

• Podstawowe dostosowywanie znaczników