Aggiungi una mappa Google con indicatori utilizzando HTML

Introduzione

Questo tutorial mostra come aggiungere una mappa Google con un indicatore a una pagina web utilizzando HTML. Ecco la mappa che creerai seguendo questo tutorial. Due indicatori sono una a Mountain View, in California, e una a Seattle, WA.

Inizia

Questi sono i passaggi che tratteremo per creare una mappa Google con un indicatore HTML:

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

Hai bisogno di un browser web. Scegline una nota come Google Chrome (consigliato) Firefox, Safari o Edge, in base alla piattaforma utilizzata elenco dei browser supportati.

Passaggio 1: ottieni una chiave API

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

Per ottenere una chiave API:

  1. Vai alla sezione console Google Cloud.

  2. Crea o seleziona un progetto.

  3. Fai clic su Continua per abilitare l'API ed eventuali servizi correlati.

  4. Nella pagina Credenziali, recupera una chiave API (e impostala ). Nota: se disponi già di una chiave API senza restrizioni o di una chiave con le restrizioni del browser, puoi utilizzare quella chiave.

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

  6. Abilitare la fatturazione. Consulta Utilizzo e fatturazione. per ulteriori informazioni.

  7. Ora è tutto pronto per 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 tag bootstrap per l'API Maps JavaScript, come mostrato seguente snippet (aggiungi la tua chiave API):

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

Spoiler: prova l'esempio finito su JSFiddle.

Passaggio 3: aggiungi una mappa

Per aggiungere una mappa Google alla pagina, copia l'elemento HTML gmp-map e incollalo. in 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 sarà 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 zoom e center parametri in gmp-map per mostrare meglio questi indicatori. L'ID mappa è obbligatorio per utilizzare gli indicatori avanzati (può essere usato DEMO_MAP_ID).

Suggerimenti e risoluzione dei problemi

  • Puoi personalizzare la mappa con styling personalizzati.
  • Utilizza la Console Strumenti per sviluppatori nel browser web per testare ed eseguire 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 questi passaggi per conoscere la latitudine e coordinate di longitudine di un luogo su Google Maps.

    1. Apri Google Maps in un browser.
    2. Fai clic con il pulsante destro del mouse sulla posizione esatta sulla mappa per la quale hai bisogno. coordinate.
    3. Seleziona Che cosa c'è qui dal menu contestuale visualizzato. La mappa mostra una scheda nella parte inferiore dello schermo. Trovare la latitudine e longitudine nell'ultima riga della scheda.

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

Codice di esempio completo

Di seguito sono riportati la mappa finale e il codice di esempio completo utilizzato per l'invio tutorial di Google Cloud.

<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