Aggiungere un indicatore a una mappa

Seleziona la piattaforma: Android iOS JavaScript

Utilizza gli indicatori per visualizzare singole località su una mappa. Questa pagina mostra come aggiungere un indicatore 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. Ciò vale sia se la tua app carica i marcatori in modo programmatico sia se utilizza HTML. A tale scopo, la tua app deve prima caricare l'API Maps JavaScript.

Il metodo che utilizzi per caricare le librerie dipende dal modo in cui 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 } = 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>

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

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

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

Prova campione

Aggiungere un indicatore in modo programmatico

Per aggiungere un indicatore avanzato a una mappa in modo programmatico, crea un nuovo AdvancedMarkerElement, passando un LatLng o un LatLngAltitude e un riferimento alla basemap, come mostrato in questo esempio:

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

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

Visualizza il codice sorgente dell'esempio completo

Questo esempio mostra come aggiungere un indicatore a una mappa.

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

Prova campione

Passaggi successivi