Aggiungere una mappa di Google Maps a una pagina web

Puoi aggiungere una mappa di Google a una pagina web utilizzando il codice HTML, CSS e JavaScript. Questa pagina mostra come aggiungere una mappa a una pagina web in due modi: utilizzando l'elemento HTML personalizzato gmp-map e un elemento div.

Panoramica

Per caricare una mappa, la pagina web deve:

  • Carica l'API Maps JavaScript utilizzando un bootstrap loader. È qui che viene passata la chiave API e può essere aggiunta 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.

Aggiungi una mappa utilizzando un elemento gmp-map

L'elemento gmp-map è un elemento HTML personalizzato creato utilizzando componenti web. Per aggiungere una mappa a una pagina web utilizzando un elemento gmp-map, procedi nel seguente modo.

  1. Nella pagina HTML, aggiungi un elemento script contenente il bootstrap configurato con la tua chiave API ed eventuali altre opzioni. Nel bootstrap di esempio seguente, il parametro callback è stato omesso perché non è necessario.

    <script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=map,marker">

  2. Nella pagina HTML, aggiungi un elemento gmp-map. Specifica le coordinate di latitudine e longitudine di center e un valore di zoom per zoom. In questo esempio viene specificato anche l'attributo di stile height.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

Esempio di codice completo

<html>
  <head>
    <title>Add a Map using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></gmp-map>

    <!-- 
      The `defer` attribute causes the callback 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&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

Aggiungi una mappa utilizzando un elemento div e JavaScript

L'elemento div è ancora supportato per il caricamento delle mappe. Per aggiungere una mappa a una pagina web utilizzando un elemento div, procedi nel seguente modo.

  1. Nella pagina HTML, aggiungi un elemento script contenente il bootloader configurato con la tua chiave API ed eventuali altre opzioni. In alternativa, aggiungi il codice bootloader direttamente a un file TypeScript o JavaScript, meno i tag script.

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

  2. Nella pagina HTML, aggiungi un elemento div che contenga la mappa.

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

  3. Nel CSS, imposta l'altezza della mappa sul 100%.

    #map {
  height: 100%;
}

  4. Nel file JavaScript, 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.

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();
index.js

Esempio di codice completo

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

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>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Prova Sample