Aggiungere una mappa di Google con un indicatore utilizzando JavaScript

Introduzione

Questo tutorial mostra come aggiungere una semplice mappa di Google con un indicatore a una pagina web. È adatto a chi ha conoscenze iniziali o intermedie di HTML e CSS e una conoscenza minima di JavaScript.

Di seguito è riportata la mappa che creerai utilizzando questo tutorial. L'indicatore è posizionato a Uluru (noto anche come Ayers Rock) nel Parco nazionale Uluru-Kata Tjuta.

Per iniziare

Per creare una mappa di Google con un indicatore nella tua pagina web, devi seguire tre passaggi:

  1. Ottieni una chiave API
  2. Creare una pagina HTML
  3. Aggiungere una mappa con un indicatore

È necessario un browser web. Scegli un browser noto come Google Chrome (consigliato), Firefox, Safari o Edge, in base alla tua piattaforma, dall'elenco dei browser supportati.

Passaggio 1: ottieni una chiave API

Questa sezione spiega come autenticare la tua app nell'API Maps JavaScript utilizzando la tua chiave API.

Per ottenere una chiave API:

  1. Vai alla console Google Cloud.

  2. Crea o seleziona un progetto.

  3. Fai clic su Continua per attivare l'API e gli eventuali servizi correlati.

  4. Nella pagina Credenziali, ottieni una chiave API (e imposta le relative limitazioni). Nota: se hai già una chiave API senza restrizioni o una chiave con limitazioni per i browser, puoi utilizzarla.

  5. Per impedire il furto di quota e proteggere la tua chiave API, consulta Utilizzo delle chiavi API.

  6. Attiva la fatturazione. Per ulteriori informazioni, consulta Utilizzo e fatturazione.

  7. Una volta ottenuta una chiave API, aggiungila al seguente snippet facendo clic su "YOUR_API_KEY". Copia e incolla il tag dello script del bootloader da utilizzare sulla tua pagina web.

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

Passaggio 2: crea una pagina HTML

Di seguito è riportato il codice di una pagina web HTML di base:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <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

Tieni presente che si tratta di una pagina molto semplice con un'intestazione di livello tre (h3) e un singolo elemento div. Puoi aggiungere alla pagina web tutti i contenuti che preferisci.

comprendi il codice

In questa fase dell'esempio abbiamo:

  • Dichiarazione dell'applicazione come HTML5 utilizzando la dichiarazione !DOCTYPE html.
  • Crea un elemento div denominato "map" per contenere la mappa.
  • L'API Maps JavaScript è stata caricata utilizzando il caricatore di bootstrap.

Dichiarare l'applicazione come HTML5

Ti consigliamo di dichiarare un valore DOCTYPE true all'interno della tua applicazione web. Negli esempi riportati di seguito, abbiamo dichiarato le nostre applicazioni come HTML5 utilizzando il semplice DOCTYPE HTML5 come mostrato di seguito:

<!DOCTYPE html>

La maggior parte dei browser attuali eseguirà il rendering dei contenuti dichiarati con questo DOCTYPE in "modalità standard", il che significa che la tua applicazione dovrebbe essere più conforme ai vari browser. DOCTYPE è progettato anche per il degrado graduale: i browser che non lo comprendono lo ignoreranno e utilizzeranno la "modalità quirks" per visualizzare i contenuti.

Tieni presente che alcuni CSS che funzionano nella modalità Quirks non sono validi in modalità standard. Nello specifico, tutte le dimensioni basate su percentuale devono ereditare dagli elementi block principali e, se uno di questi elementi ancestrali non riesce a specificare una dimensione, si presume che le dimensioni siano 0 x 0 pixel. Per questo motivo, includiamo la seguente dichiarazione style:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Creare un elemento div

Affinché la mappa venga visualizzata in una pagina web, dobbiamo riservare uno spazio per essa. Di solito, lo facciamo creando un elemento div denominato e ottenendo un riferimento a questo elemento nel DOM (Document Object Model) del browser.

Il codice riportato di seguito definisce un'area della pagina per la tua mappa di Google.

<!--The div element for the map -->
<div id="map"></div>

In questa fase del tutorial, div viene visualizzato solo come un blocco grigio perché non hai ancora aggiunto una mappa. Il codice seguente descrive il CSS che imposta le dimensioni e il colore del div.

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

Nel codice riportato sopra, l'elemento style imposta la dimensione div della mappa. Imposta la larghezza e l'altezza di div su un valore maggiore di 0 px per rendere visibile la mappa. In questo caso, div è impostato su un'altezza di 400 pixel e una larghezza del 100% per essere visualizzato nella larghezza della pagina web. Tieni presente che le div di solito acquisiscono la larghezza dall'elemento contenitore e le div vuote hanno generalmente un'altezza pari a 0. Per questo motivo, devi sempre impostare esplicitamente un'altezza per div.

Carica l'API Maps JavaScript

Il caricatore di bootstrap prepara l'API Maps JavaScript per il caricamento (non vengono caricate librerie fino all'esecuzione di importLibrary()).

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

Consulta il passaggio 3: ottieni una chiave API per istruzioni su come ottenere la tua chiave API.

Passaggio 3: aggiungi una mappa con un indicatore

Questa sezione mostra come caricare l'API Maps JavaScript nella pagina web e come scrivere il tuo codice JavaScript che utilizza l'API per aggiungere una mappa con un indicatore.

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Nel codice riportato sopra, le librerie Map e AdvancedMarkerElement vengono caricate quando viene chiamata la funzione initMap().

comprendi il codice

A questo punto del tutorial abbiamo:

  • È stata definita una funzione JavaScript che crea una mappa nel div.
  • È stato creato un AdvancedMarkerElement per aggiungere un indicatore alla mappa.

Aggiungere una mappa

Il codice riportato di seguito crea un nuovo oggetto Google Maps e aggiunge proprietà alla mappa, tra cui il centro e il livello di zoom. Consulta la documentazione per altre opzioni di proprietà.

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

Esistono due opzioni obbligatorie per ogni mappa: center e zoom. Nel codice riportato sopra, new Map() crea un nuovo oggetto Google Maps. La proprietà center indica all'API dove centrare la mappa.

La proprietà zoom specifica il livello di zoom della mappa. Zoom: 0 è lo zoom minimo e mostra l'intera Terra. Imposta un valore di zoom più alto per aumentare lo zoom della Terra a risoluzioni più elevate.

Offrire una mappa dell'intera Terra come singola immagine richiederebbe una mappa immensa o una piccola mappa con una risoluzione molto bassa. Di conseguenza, le immagini della mappa in Google Maps e nell'API Maps JavaScript sono suddivise in "riquadri" e "livelli di zoom" della mappa. A livelli di zoom ridotti, un piccolo insieme di riquadri della mappa copre un'area ampia; a livelli di zoom superiori, i riquadri sono di risoluzione più elevata e coprono un'area più piccola. L'elenco seguente mostra il livello approssimativo di dettaglio previsto per ogni livello di zoom:

  • 1: Mondo
  • 5: massa continentale o continente
  • 10: Città
  • 15: Strade
  • 20: Edifici

Le tre immagini seguenti mostrano la stessa località di Tokyo a livelli di zoom 0, 7 e 18.

Aggiungi un marcatore

Il codice riportato di seguito inserisce un indicatore sulla mappa. La proprietà position imposta la posizione dell'indicatore.

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Codice di esempio completo

Visualizza il codice di esempio completo qui:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

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>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <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

Scopri di più sugli indicatori:

Suggerimenti e risoluzione dei problemi

  • Scopri di più su come ottenere le coordinate di latitudine/longitudine o convertire un indirizzo in coordinate geografiche.
  • Puoi modificare opzioni come stile e proprietà per personalizzare la mappa. Per maggiori informazioni sulla personalizzazione delle mappe, leggi le guide allo stile e al disegno sulla mappa.
  • Utilizza la console Strumenti per gli sviluppatori nel browser web per testare ed eseguire il codice, leggere i report sugli errori e risolvere i problemi relativi al codice.
  • Usa le seguenti scorciatoie da tastiera per aprire la console in Chrome:
    Cmd+Opzione+J (su Mac) o Ctrl+Maiusc+J (su Windows).

  • Segui i passaggi riportati di seguito per ottenere le coordinate di latitudine e longitudine di una località su Google Maps.

    1. Apri Google Maps in un browser.
    2. Fai clic con il tasto destro del mouse sulla posizione esatta sulla mappa per cui ti occorrono le coordinate.
    3. Seleziona Che cosa c'è qui dal menu contestuale visualizzato. Nella mappa viene visualizzata una scheda nella parte inferiore dello schermo. Trova le coordinate di latitudine e longitudine nell'ultima riga della scheda.

  • Puoi convertire un indirizzo in coordinate di latitudine e longitudine utilizzando il servizio di geocodifica. Le guide per gli sviluppatori forniscono informazioni dettagliate su come iniziare a utilizzare il servizio di geocodifica.