Aggiungere una mappa di Google con indicatori utilizzando HTML

Introduzione

Questo tutorial mostra come aggiungere una mappa Google con un indicatore a una pagina web utilizzando elementi HTML personalizzati. Di seguito è riportata la mappa che creerai utilizzando questo tutorial. Un indicatore è posizionato a Ottumwa, Iowa.

Inizia

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

  1. Ottieni una chiave API
  2. Crea HTML, CSS e JS
  3. Aggiungi una mappa
  4. Aggiungi un indicatore

Hai bisogno di un browser web. Scegline uno 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 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 limitazioni o una chiave con limitazioni del browser, puoi utilizzarla.

  5. Per impedire il furto di quote e proteggere la chiave API, vedi Utilizzo delle chiavi API.

  6. Abilita la fatturazione. Per ulteriori informazioni, vedi Utilizzo e fatturazione.

  7. Ora puoi utilizzare la chiave API.

Passaggio 2: crea HTML, CSS e JS

Di seguito è riportato 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 caricatore di bootstrap per l'API Maps JavaScript, come mostrato nel seguente snippet (aggiungi la tua chiave API):

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

Poiché la pagina HTML deve essere autonoma, aggiungi il codice CSS direttamente alla pagina:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Passaggio 3: aggiungi una mappa

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

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Viene creata una mappa centrata su Ottumwa, Iowa, ma non è ancora presente alcun indicatore.

Passaggio 4: aggiungi un indicatore

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

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

Il codice precedente aggiunge un indicatore alla mappa. Per utilizzare gli indicatori avanzati è necessario un ID mappa (puoi utilizzare DEMO_MAP_ID).

Prova l'esempio completo su JSFiddle.

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 con il 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 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 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 Geocoding. Le guide per gli sviluppatori forniscono informazioni dettagliate su come iniziare a utilizzare il servizio Geocoding.

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>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>