Aggiungere una mappa di Google con indicatori utilizzando HTML

Introduzione

Questo tutorial mostra come aggiungere una mappa di Google con un indicatore a una pagina web utilizzando elementi HTML personalizzati. Ecco la mappa che creerai utilizzando questo tutorial. Sono posizionati due indicatori, uno a Mountain View, CA, e uno a Seattle, WA.

Inizia

Ecco i passaggi che tratteremo per creare una mappa di Google con un indicatore utilizzando HTML:

  1. Recuperare una chiave API
  2. Creare HTML, CSS e JS
  3. Aggiungere una mappa
  4. Aggiungere un indicatore

Hai bisogno di 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, segui questi passaggi:

  1. Vai alla console Google Cloud.

  2. Crea o seleziona un progetto.

  3. Fai clic su Continua per abilitare l'API e tutti i servizi correlati.

  4. Nella pagina Credenziali, ottieni una chiave API (e imposta le limitazioni della chiave API). Nota: se hai una chiave API esistente senza restrizioni o una chiave con restrizioni del browser, puoi utilizzarla.

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

  6. Abilita la fatturazione. Per ulteriori informazioni, consulta la sezione Utilizzo e fatturazione.

  7. Ora puoi utilizzare la tua chiave API.

Passaggio 2: crea HTML, CSS e JS

Ecco il codice per una pagina web HTML di base:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Per caricare una mappa, devi aggiungere un tag script contenente il bootstrap loader per l'API Maps JavaScript, come mostrato nello snippet seguente (aggiungi la tua chiave API):

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

Attenzione: prova l'esempio finito su JSFiddle.

Passaggio 3: aggiungi una mappa

Per aggiungere una mappa di Google alla pagina, copia l'elemento HTML gmp-map e incollalo all'interno di body della pagina HTML:

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

Il risultato è la seguente mappa:

La mappa che hai appena creato è centrata sull'area metropolitana di San Jose.

Passaggio 4: aggiungi un indicatore

Per aggiungere un indicatore alla mappa, utilizza l'elemento HTML gmp-advanced-marker. Copia il seguente snippet e incollalo sopra l'intero gmp-map che hai aggiunto nel passaggio precedente.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Il codice precedente aggiunge due indicatori e modifica i parametri zoom e center in gmp-map per visualizzare meglio questi indicatori. Per utilizzare gli indicatori avanzati è necessario un ID mappa (DEMO_MAP_ID è accettabile).

Suggerimenti e risoluzione dei problemi

  • Puoi personalizzare la mappa con stili personalizzati.
  • Utilizza la console degli 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:
    Cmd+Opzione+J (su Mac) o Ctrl+Maiusc+J (su Windows).

  • Segui questi passaggi 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 hai bisogno delle coordinate.
    3. Seleziona Che cosa c'è qui dal menu contestuale visualizzato. La mappa mostra 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.

Codice di esempio completo

Di seguito è riportata la mappa finale e il codice di esempio completo utilizzato per questo tutorial.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

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