Introduzione
Questo tutorial ti mostra come aggiungere una semplice mappa di Google con un indicatore a una pagina web. È adatto a persone principianti o intermedie di HTML e CSS e poca conoscenza di JavaScript.
Di seguito è riportata la mappa che creerai utilizzando questo tutorial. L'indicatore è posizionato a Uluru (noto anche come Ayers Rock) nel parco nazionale Uluru-Kata Tjuta.
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
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> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Prova Sample
Per iniziare
Per creare una mappa di Google con un indicatore sulla tua pagina web, devi eseguire tre passaggi:
Devi usare un browser web. Scegline una conosciuta come Google Chrome (consigliato), Firefox, Safari o Edge, a seconda della tua piattaforma, dall'elenco dei browser supportati.
Passaggio 1: crea una pagina HTML
Di seguito è riportato 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> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </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 costituita da un intestazione e un corpo.
<html> <head> </head> <body> </body> </html>
Puoi aggiungere un'intestazione di livello tre sopra la mappa utilizzando il codice riportato di seguito.
<h3>My Google Maps Demo</h3>
Il codice seguente definisce un'area della pagina per la tua mappa Google.
<!--The div element for the map --> <div id="map"></div>
In questa fase del tutorial, div
viene visualizzato solo come un blocco grigio, perché
non hai ancora aggiunto una mappa. Il codice seguente descrive il CSS che imposta le dimensioni e il colore di div
.
/* 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
della mappa. Imposta la larghezza e l'altezza di div
su valori superiori a 0 px per rendere visibile la mappa. In questo caso, l'elemento div
è impostato su un'altezza di 400 pixel e una larghezza del 100% per mostrare tutta la larghezza della pagina web.
Il bootstrap prepara l'API Maps JavaScript per il caricamento (nessuna libreria viene caricata fino alla chiamata di importLibrary()
).
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Consulta il Passaggio 3: ottieni una chiave API per istruzioni su come ottenere una chiave API personalizzata.
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 utilizzi l'API per aggiungere una mappa con un indicatore.
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
Nel codice riportato sopra, le librerie Map
e AdvancedMarkerView
vengono caricate quando viene chiamata la funzione initMap()
.
Nozioni di base sul codice
Il codice riportato di seguito crea un nuovo oggetto di 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 position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );
JavaScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });
Nel codice riportato sopra, new Map()
crea un nuovo oggetto Google Maps. La proprietà center
indica all'API dove centrare la mappa.
Scopri di più su come ottenere le coordinate di latitudine/longitudine o convertire un indirizzo in coordinate geografiche.
La proprietà zoom
specifica il livello di zoom della mappa. Zoom: 0 è lo zoom minimo e mostra l'intera Terra. Imposta un valore di zoom più alto per aumentare
lo zoom sulla Terra a risoluzioni più alte.
Il codice seguente inserisce un indicatore sulla mappa. La proprietà position
imposta la
posizione dell'indicatore.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
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, segui questi passaggi:
Vai alla console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API e gli eventuali servizi correlati.
Nella pagina Credenziali, recupera una chiave API (e imposta le restrizioni relative alle chiavi API). Nota: se disponi di una chiave API senza restrizioni esistente o di una chiave con restrizioni del browser, puoi utilizzare questa chiave.
Per impedire il furto di quota e proteggere la chiave API, consulta Utilizzo delle chiavi API.
Abilita la fatturazione. Per ulteriori informazioni, consulta la sezione Utilizzo e fatturazione.
Copia l'intero codice di questo tutorial da questa pagina nell'editor di testo.
Sostituisci il valore del parametro
key
nell'URL con la tua chiave API (si tratta della chiave API che hai appena ottenuto).<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
Salva il file con un nome che termini con
.html
, ad esempioindex.html
.Carica il file HTML in un browser web trascinandolo dal desktop nel browser. In alternativa, puoi fare doppio clic sul file nella maggior parte dei sistemi operativi.
Suggerimenti e risoluzione dei problemi
- Puoi modificare opzioni quali stile e proprietà per personalizzare la mappa. Per ulteriori informazioni 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 la procedura riportata di seguito per ottenere le coordinate di latitudine e 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 richiedi le coordinate.
- 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 Geocoding.