Aggiungere una mappa di Google a una pagina web

Puoi aggiungere una mappa Google a una pagina web utilizzando il codice HTML, CSS e JavaScript. Questa pagina mostra come aggiungere una mappa a una pagina web e poi accedere all'istanza della mappa in modo programmatico.

• Aggiungi una mappa utilizzando un elemento gmp-map
• Aggiungi una mappa utilizzando un elemento div e JavaScript
• Imposta e ottieni le proprietà nell'istanza della mappa

Panoramica

Per caricare una mappa, la tua pagina web deve:

• Carica l'API Maps JavaScript utilizzando un boot loader. Qui viene passata la chiave API. Può essere aggiunto ai file di origine HTML o JavaScript.
• Aggiungi la mappa alla pagina HTML e gli stili CSS necessari.
• Carica la libreria maps e inizializza la mappa.

Aggiungi una mappa utilizzando un elemento gmp-map

L'elemento gmp-map è il modo preferito per aggiungere una mappa Google a una pagina web. Si tratta di un elemento HTML personalizzato creato utilizzando i componenti web. Per aggiungere una mappa a una pagina web utilizzando un elemento gmp-map, segui questi passaggi.

1. Aggiungi un elemento script contenente il bootstrap a una pagina HTML o aggiungilo a un file di codice sorgente JavaScript o TypeScript senza l'elemento script. Configura il bootstrap con la tua chiave API e altre opzioni. Puoi scegliere l'importazione dinamica della libreria o il caricamento diretto dello script. Questo esempio mostra l'aggiunta del bootstrap di caricamento dinamico degli script a una pagina HTML:

   <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: "YOUR_API_KEY",
       v: "weekly",
       // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
       // Add other bootstrap parameters as needed, using camel case.
     });
   </script>

   Scopri di più sul caricamento dell'API Maps JavaScript

2. Nella pagina HTML, aggiungi un elemento gmp-map. Specifica le coordinate di latitudine e longitudine per center (obbligatorio), un valore di zoom per zoom (obbligatorio) e un map-id se necessario (è obbligatorio per alcune funzionalità come gli indicatori avanzati).

<gmp-map center="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
</gmp-map>
index.html

Codice di esempio completo

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.ts

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.js

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

<html>
    <head>
        <title>Simple Map</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="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
index.html

Aggiungi una mappa utilizzando un elemento div e JavaScript

Per aggiungere una mappa a una pagina web utilizzando un elemento div, segui questi passaggi.

1. Aggiungi un elemento script contenente il bootstrap a una pagina HTML o aggiungilo a un file di codice sorgente JavaScript o TypeScript senza l'elemento script. Configura il bootstrap con la tua chiave API e altre opzioni. Puoi scegliere l'importazione dinamica della libreria o il caricamento diretto dello script. Questo esempio mostra l'aggiunta del bootstrap dinamico a una pagina HTML:

   <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: "YOUR_API_KEY",
       v: "weekly",
       // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
       // Add other bootstrap parameters as needed, using camel case.
     });
   </script>

   Scopri di più sul caricamento dell'API Maps JavaScript

2. Nella pagina HTML, aggiungi un elemento div per contenere la mappa.

   <div id="map"></div>

3. Nel CSS, imposta l'altezza di html, body e #map su 100%. La proprietà CSS height è obbligatoria per rendere visibile la mappa, perché gli elementi div vuoti hanno un'altezza predefinita pari a 0. Poiché le altezze basate su percentuali vengono ereditate dagli elementi principali in modalità StrictMode, l'impostazione di height: 100% su html e body, nonché su #map, garantisce una catena ininterrotta di ereditarietà dell'altezza dall'area visibile al contenitore della mappa in tutti i browser.

   html,
   body,
   #map {
     height: 100%;
     margin: 0;
     padding: 0;
   }

4. Nel file JS o TS, crea una funzione per caricare la libreria maps e inizializzare la mappa. Specifica le coordinate di latitudine e longitudine per center e il livello di zoom da utilizzare per zoom. Se necessario, aggiungi un ID mappa utilizzando la proprietà mapId. Poiché la mappa verrà visualizzata per impostazione predefinita in formato raster, richiedi una mappa vettoriale specificando l'opzione di mappa "VECTOR". Il tipo di mappa vettoriale è consigliato per un'esperienza utente ottimale, in quanto offre una maggiore fedeltà visiva e la possibilità di controllare l'inclinazione e l'orientamento sulla mappa.

   TypeScript

   let map: google.maps.Map;
   async function init(): Promise<void> {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map')!, {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.ts

   JavaScript

   let map;
   async function init() {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.js

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.ts

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.js

/* 
 * 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>
    <head>
        <title>Simple Map</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>
        <div id="map"></div>
    </body>
</html>
index.html

Imposta e ottieni proprietà nell'istanza della mappa

Per interagire con l'istanza della mappa, seleziona l'elemento contenitore. Il codice per farlo varia a seconda che tu abbia utilizzato l'elemento gmp-map o un elemento div.

Ottieni un'istanza della mappa da un elemento gmp-map

Per ottenere l'istanza della mappa quando utilizzi un elemento gmp-map, utilizza document.querySelector per recuperare un'istanza mapElement, come mostrato qui.

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

Poi imposta le proprietà nell'istanza mapElement:

mapElement.zoom = 8;

La classe MapElement utilizza la classe Map internamente. Accedi alla classe Map utilizzando la proprietà MapElement.innerMap, come mostrato qui:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Ottieni un'istanza della mappa da un elemento div

Quando utilizzi un elemento div, recupera l'istanza della mappa e imposta le opzioni al momento dell'inizializzazione:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

Dopo l'inizializzazione, imposta le opzioni nell'istanza map come mostrato di seguito:

map.setOptions({
    zoom: 8,
});