Aggiungere una mappa di Google a una pagina web

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

Panoramica

Per caricare una mappa, la pagina web deve eseguire le seguenti operazioni:

  • Caricare l'API Maps JavaScript utilizzando un loader di bootstrap. È qui che viene passata la chiave API. Può essere aggiunta ai file di origine HTML o JavaScript.
  • Aggiungere la mappa alla pagina HTML e aggiungere gli stili CSS necessari.
  • Caricare la libreria maps e inizializzare la mappa.

Aggiungere 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 oppure aggiungilo a un file di origine JavaScript o TypeScript senza l'elemento script. Configura il bootstrap con la tua 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 initMap(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();

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>
        <!-- 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>
    </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, segui questi passaggi.

  1. Aggiungi un elemento script contenente il bootstrap a una pagina HTML oppure aggiungilo a un file di origine JavaScript o TypeScript senza l'elemento script. Configura il bootstrap con la tua 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 su 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 su raster, richiedi una mappa vettoriale specificando l'opzione mappa "VECTOR". Il tipo di mappa vettoriale è consigliato per un'esperienza utente ottimale, in quanto offre una fedeltà visiva migliorata e la possibilità di controllare l'inclinazione e l'orientamento sulla mappa.

    TypeScript

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

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

initMap();

    JavaScript

    let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();

Visualizza il codice sorgente di esempio completo

TypeScript

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

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

initMap();

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();

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>

    <!-- 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>
</head>

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

</html>

Prova campione

Impostare e ottenere le proprietà dell'istanza della mappa

Per interagire con l'istanza della mappa, seleziona l'elemento contenitore. Il codice per eseguire questa operazione 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 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 dell'istanza map come mostrato qui:

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