Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere una mappa Google con un indicatore al sito web

Introduzione

Questo tutorial ti mostra come aggiungere una semplice mappa di Google con un indicatore a una pagina web. Adatto a persone con conoscenze di livello principiante o intermedio di HTML e CSS, oltre a qualche conoscenza di JavaScript. Per una guida avanzata alla creazione di mappe, consulta la guida per gli sviluppatori.

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

La sezione seguente mostra l'intero codice necessario per creare la mappa in questo tutorial.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* 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 */
}
style.css

HTML

<html>
  <head>
    <title>Add 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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Prova anteprima

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Come iniziare

Per creare una mappa Google con un indicatore sulla tua pagina web sono necessari tre passaggi:

Creare una pagina HTML
Aggiungere una mappa con un indicatore
Procurati una chiave API

È necessario avere un browser web. Scegline uno noto come Google Chrome (consigliato), Firefox, Safari o Edge, in base all'elenco di browser supportati.

Passaggio 1: crea una pagina HTML

Ecco il codice per 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>
    <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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Tieni presente che questa è 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.

Nozioni di base sul codice

Il codice riportato di seguito crea una pagina HTML composta da un elemento head e un corpo.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Puoi aggiungere un livello di intestazione tre sopra la mappa utilizzando il codice seguente.

<h3>My Google Maps Demo</h3>

Il codice seguente definisce un'area della pagina relativa alla tua mappa Google.

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

In questa fase del tutorial, div appare come un blocco grigio, perché non hai ancora aggiunto una mappa. Il codice riportato di seguito descrive il CSS che imposta le dimensioni e il colore di div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 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 le dimensioni div per la mappa. Imposta una larghezza e un'altezza di div superiori a 0 px per rendere visibile la mappa. In questo caso, il div è impostato su un'altezza di 400 pixel, e una larghezza del 100% per mostrare la larghezza della pagina web.

Passaggio 2: aggiungi una mappa con un indicatore

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

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* 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 */
}
style.css

HTML

<html>
  <head>
    <title>Add 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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Prova anteprima

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Nozioni di base sul codice

Nel codice riportato di seguito, script carica l'API dall'URL specificato.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Nel codice riportato sopra, il parametro callback esegue la funzione initMap dopo il caricamento dell'API. L'attributo async consente al browser di continuare a analizzare il resto della pagina durante il caricamento dell'API. Una volta caricato, il browser mette in pausa ed esegue immediatamente lo script. Il parametro key contiene la chiave API.

Consulta il Passaggio 3: ottieni una chiave API per istruzioni su come recuperare la chiave API in un secondo momento.

Il codice riportato di seguito contiene la funzione initMap che inizializza e aggiunge la mappa quando viene caricata la pagina web. Utilizza un tag script per includere il tuo JavaScript, che contiene la funzione initMap.

  function initMap() {}

Aggiungi la funzione document.getElementById() per trovare la mappa div nella pagina web.

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 uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

Nel codice precedente, new google.maps.Map() crea un nuovo oggetto Google Maps. La proprietà center indica all'API dove centrare la mappa.

Scopri di più su come ricevere coordinate di latitudine/longitudine o convertire un indirizzo in coordinate geografiche.

La proprietà zoom specifica il livello di zoom per la mappa. Zoom: 0 è lo zoom più basso e mostra l'intero pianeta. Imposta un valore di zoom più alto per ingrandire la Terra a risoluzioni maggiori.

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 google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

Scopri di più sugli indicatori:

Passaggio 3: 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:

Vai alla console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API e i servizi correlati.
Nella pagina Credenziali, ottieni una chiave API (e imposta le restrizioni per la chiave API). Nota: puoi utilizzare una chiave API senza restrizioni esistente o con restrizioni del browser.
Per prevenire il furto di quota e proteggere la chiave API, consulta la sezione Utilizzo di chiavi API.
Abilitare la fatturazione. Per ulteriori informazioni, consulta la pagina Utilizzo e fatturazione.
Copia l'intero codice di questo tutorial da questa pagina nel tuo editor di testo.
Sostituisci il valore del parametro key nell'URL con la chiave API personale, ovvero la chiave API appena ottenuta.
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```
Salva questo file con un nome che termina con .html, ad esempio index.html.
Carica il file HTML in un browser web trascinandolo dal desktop al browser. In alternativa, il doppio clic sul file funziona sulla maggior parte dei sistemi operativi.

Suggerimenti e risoluzione dei problemi

Puoi modificare opzioni quali stile e proprietà per personalizzare la mappa. Per scoprire di più sulla personalizzazione delle mappe, leggi le guide all'applicazione di stili e al disegno sulla mappa.
Utilizza la Console Strumenti per sviluppatori nel browser web per testare ed eseguire il codice, leggere i report sugli errori e risolvere i problemi relativi al codice.
Utilizza le seguenti scorciatoie da tastiera per aprire la console in Chrome:
Comando+Opzione+J (su Mac) o Ctrl+Maiusc+J (su Windows).
Segui i passaggi riportati di seguito per visualizzare le coordinate di latitudine e longitudine di una sede 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 hai bisogno di coordinate.
3. Seleziona Che cosa c'è qui dal menu contestuale che viene visualizzato. La mappa mostra una scheda nella parte inferiore dello schermo. Trova le coordinate della latitudine e della 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.