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:
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:
Vai alla sezione console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API ed eventuali servizi correlati.
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.
Per evitare il furto di quota e proteggere la tua chiave API, consulta Utilizzo delle chiavi API.
Abilita la fatturazione. Consulta Utilizzo e fatturazione. per ulteriori informazioni.
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 prefisso
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>
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.
- Apri Google Maps in un browser.
- Fai clic con il pulsante destro del mouse sulla posizione esatta sulla mappa per la quale hai bisogno. coordinate.
- 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 durante il 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>