Introduzione
Questo tutorial mostra come aggiungere una mappa Google semplice con un indicatore a una pagina web. È adatto a persone con una conoscenza di livello principiante o intermedio di HTML e CSS e una piccola conoscenza di JavaScript.
Di seguito è riportata la mappa che creerai utilizzando questo tutorial. L'indicatore è posizionato a Uluru (nota anche come Ayers Rock) nel Parco nazionale di Uluru-Kata Tjuta.
Per iniziare
Per creare una mappa Google con un indicatore sulla tua pagina web sono previsti tre passaggi:
Hai bisogno di un browser web. Scegline uno noto come Google Chrome (opzione consigliata), 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:
Vai alla console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API ed eventuali servizi correlati.
Nella pagina Credenziali, ottieni una chiave API (e imposta le relative limitazioni). Nota: se disponi già di una chiave API senza restrizioni o di una chiave con restrizioni del browser, puoi utilizzare quella chiave.
Per evitare il furto di quota e proteggere la tua chiave API, consulta Utilizzo delle chiavi API.
Abilitare la fatturazione. Per ulteriori informazioni, consulta Utilizzo e fatturazione.
Dopo aver ottenuto una chiave API, aggiungila al seguente snippet facendo clic su "YOUR_API_KEY". Copia e incolla il tag dello script del bootloader da utilizzare sulla tua pagina web.
<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>style="height: 400px"
Passaggio 2: 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>
<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 basilare con un'intestazione di livello tre (h3) e un
singolo elemento div. Puoi aggiungere alla pagina web qualsiasi contenuto tu voglia.
comprendi il codice
Il codice seguente crea una pagina HTML composta 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 seguente.
<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, lo div viene visualizzato solo come un blocco grigio, perché non hai ancora aggiunto una mappa. Il codice seguente descrive il CSS che imposta la dimensione e il colore dell'elemento 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 la dimensione div per la mappa. Imposta la larghezza e l'altezza di div su un valore superiore a 0 px per rendere visibile la mappa. In questo caso, div è impostato su un'altezza di 400 pixel e una larghezza del 100% per essere visualizzata in tutta la larghezza della pagina web.
Il bootstrap loader prepara l'API Maps JavaScript per il caricamento
(non vengono caricate librerie fino a quando non viene chiamato 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 le istruzioni su come ottenere la tua chiave API personalizzata.
Passaggio 3: 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 precedente, le librerie Map e AdvancedMarkerView vengono caricate quando
viene chiamata la funzione initMap().
comprendi il 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 le 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 di Google Maps. La proprietà center indica all'API dove centrare la mappa.
Scopri di più su come ottenere le coordinate di latitudine/longitudine o come convertire un indirizzo in coordinate geografiche.
La proprietà zoom specifica il livello di zoom della mappa. Zoom: 0 è lo zoom più basso
e visualizza l'intera Terra. Imposta un valore più alto per aumentare lo zoom
sulla Terra a risoluzioni più alte.
Il codice seguente consente di inserire un indicatore sulla mappa. La proprietà position consente di impostare 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",
});
Codice di esempio completo
Guarda il codice di esempio completo qui:
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>
<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
Scopri di più sugli indicatori:
Suggerimenti e risoluzione dei problemi
- Puoi modificare opzioni come lo stile e le proprietà per personalizzare la mappa. Per ulteriori informazioni sulla personalizzazione delle mappe, leggi le guide all'applicazione di stili e a disegnare 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). Per ottenere le coordinate di latitudine e longitudine di un luogo su Google Maps, procedi nel seguente modo.
- Apri Google Maps in un browser.
- Fai clic con il pulsante destro del mouse sulla posizione esatta sulla mappa per la quale hai bisogno delle 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.