Aggiungere un indicatore a una mappa

Seleziona la piattaforma: Android iOS JavaScript

Utilizza i marcatori per visualizzare singole località su una mappa. Questa pagina mostra come aggiungere un marcatore a una mappa in modo programmatico e utilizzando elementi HTML personalizzati.

Caricare la libreria degli indicatori avanzati

Per aggiungere un indicatore avanzato a una mappa, il codice della mappa deve caricare la libreria marker, che fornisce le classi AdvancedMarkerElement e PinElement. Questo vale sia se la tua app carica gli indicatori in modo programmatico sia se utilizza HTML. Per farlo, la tua app deve prima caricare l'API Maps JavaScript.

Il metodo che utilizzi per caricare le librerie dipende da come la tua pagina web carica l'API Maps JavaScript.

  • Se la tua pagina web utilizza il caricamento dinamico degli script, aggiungi la libreria dei marcatori e importa AdvancedMarkerElement (e facoltativamente PinElement) in fase di runtime, come mostrato qui.

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

  • Se la tua pagina web utilizza il tag di caricamento diretto dello script, aggiungi libraries=marker allo script di caricamento, come mostrato nello snippet seguente. In questo modo verranno importati sia AdvancedMarkerElement che PinElement.

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

Imposta un ID mappa

Per utilizzare gli indicatori avanzati è necessario un ID mappa (è possibile utilizzare DEMO_MAP_ID). Imposta un ID mappa nelle opzioni della mappa, come mostrato qui:

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

Se utilizzi i componenti web, puoi impostare l'ID mappa direttamente sull'elemento gmp-map:

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

Scopri di più sugli ID mappa.

Aggiungere un indicatore utilizzando elementi HTML personalizzati

Per aggiungere un indicatore avanzato utilizzando elementi HTML personalizzati, aggiungi un elemento secondario gmp-advanced-marker all'elemento gmp-map. Il seguente snippet mostra l'aggiunta di indicatori a una pagina web:

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

Visualizza il codice sorgente dell'esempio completo

Questo esempio mostra la creazione di una mappa con indicatori utilizzando HTML.

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>

Prova campione

Aggiungere un indicatore in modo programmatico

Per aggiungere un indicatore avanzato a una mappa in modo programmatico, crea un nuovo AdvancedMarkerElement e aggiungilo alla mappa come mostrato in questo esempio:

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

L'aggiunta di elementi è possibile solo quando si utilizzano componenti web. Se l'elemento div viene utilizzato per caricare la mappa, utilizza la proprietà map per associare l'indicatore all'istanza della mappa come mostrato di seguito:

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

Rimuovere un indicatore

Per rimuovere un indicatore dalla mappa, imposta marker.map o marker.position su null.

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

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

Visualizza il codice sorgente dell'esempio completo

Questo esempio mostra come aggiungere un indicatore a una mappa.

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>

Prova campione

Passaggi successivi