Aggiungere una mappa di Google a una pagina web

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

Panoramica

Per caricare una mappa, la tua pagina web deve:

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

Aggiungere una mappa utilizzando un elemento gmp-map

L'elemento gmp-map è il modo preferito per aggiungere una mappa di 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 oppure aggiungilo a un file sorgente JavaScript o TypeScript senza l'elemento script. Configura il bootstrap con la chiave API e qualsiasi altra opzione. Puoi scegliere l'importazione dinamica della libreria o il caricamento diretto dello script. Questo esempio mostra l'aggiunta del bootstrap di caricamento dinamico dello 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 i marcatori avanzati).

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>

Esempio di codice completo

TypeScript

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

JavaScript

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

CSS

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

HTML

<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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>

Prova campione

Aggiungere una mappa utilizzando un elemento div e JavaScript

Per aggiungere una mappa a una pagina web utilizzando un elemento div:

  1. Aggiungi un elemento script contenente il bootstrap a una pagina HTML oppure aggiungilo a un file sorgente JavaScript o TypeScript senza l'elemento script. Configura il bootstrap con la chiave API e qualsiasi altra opzione. 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 della mappa al 100%. L'attributo CSS height è obbligatorio per la visibilità della mappa.

    #map {
  height: 100%;
}

  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à impostata per impostazione predefinita sul raster, richiedi una mappa vettoriale specificando l'opzione mappa "VECTOR". Il tipo di mappa vettoriale è consigliato per la migliore esperienza utente, in quanto offre una fedeltà visiva migliorata, nonché 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();

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

Visualizza il codice sorgente dell'esempio completo

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

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

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

HTML

<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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
            });
        </script>
    </head>

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

Prova campione

Impostare e ottenere proprietà sull'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.

Ottenere 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 di mapElement, come mostrato qui.

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

Quindi, imposta le proprietà dell'istanza mapElement:

mapElement.zoom = 8;

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

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

Ottenere un'istanza della mappa da un elemento div

Quando utilizzi un elemento div, ottieni 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 sull'istanza map come mostrato qui:

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