Introduzione
Questo tutorial ti mostra come aggiungere una semplice mappa di Google con un indicatore a una pagina web. Adatto a persone con conoscenze di livello principiante o intermedio di HTML e CSS, oltre a qualche conoscenza di JavaScript. Per una guida avanzata alla creazione di mappe, consulta la guida per gli sviluppatori.
Di seguito è riportata la mappa che creerai utilizzando questo tutorial. L'indicatore è posizionato a Uluru (noto anche come Ayers Rock) nel parco nazionale di Uluru-Kata Tjuta.
La sezione seguente mostra l'intero codice necessario per creare la mappa in questo tutorial.
TypeScript
// Initialize and add the map function initMap(): void { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } window.initMap = initMap;
CSS
/* 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 */ }
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> <!-- The `defer` attribute causes the callback 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 with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Prova anteprima
Come iniziare
Per creare una mappa Google con un indicatore sulla tua pagina web sono necessari tre passaggi:
È necessario avere un browser web. Scegline uno noto come Google Chrome (consigliato), Firefox, Safari o Edge, in base all'elenco di browser supportati.
Passaggio 1: crea una pagina HTML
Ecco 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> <!-- The `defer` attribute causes the callback 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 with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></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 composta da un elemento head e un corpo.
<html> <head> </head> <body> </body> </html>
Puoi aggiungere un livello di intestazione tre sopra la mappa utilizzando il codice seguente.
<h3>My Google Maps Demo</h3>
Il codice seguente definisce un'area della pagina relativa alla tua mappa Google.
<!--The div element for the map --> <div id="map"></div>
In questa fase del tutorial, div
appare come un blocco grigio, perché non hai ancora aggiunto una mappa. Il codice riportato di seguito descrive il CSS che imposta le dimensioni e il colore di div
.
/** * @license * Copyright 2019 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* 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
per la mappa. Imposta una larghezza e un'altezza di div
superiori a 0 px per rendere visibile la mappa. In questo
caso, il div
è impostato su un'altezza di 400 pixel, e una larghezza del 100% per mostrare
la larghezza della pagina web.
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 la utilizzi per aggiungere una mappa con un indicatore.
TypeScript
// Initialize and add the map function initMap(): void { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } window.initMap = initMap;
CSS
/* 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 */ }
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> <!-- The `defer` attribute causes the callback 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 with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Prova anteprima
Nozioni di base sul codice
Nel codice riportato di seguito, script
carica l'API dall'URL specificato.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Nel codice riportato sopra, il parametro callback
esegue la funzione initMap
dopo il caricamento dell'API. L'attributo async
consente al browser di continuare a analizzare il resto della pagina durante il caricamento dell'API. Una volta caricato, il browser mette in pausa ed esegue immediatamente lo script. Il parametro key
contiene la chiave API.
Consulta il Passaggio 3: ottieni una chiave API per istruzioni su come recuperare la chiave API in un secondo momento.
Il codice riportato di seguito contiene la funzione initMap
che inizializza e aggiunge la mappa quando viene caricata la pagina web. Utilizza un tag script
per includere il tuo JavaScript, che contiene la funzione initMap
.
function initMap() {}
Aggiungi la funzione document.getElementById()
per trovare la mappa div
nella pagina web.
Il codice riportato di seguito crea un nuovo oggetto 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 uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } );
JavaScript
// The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, });
Nel codice precedente, new google.maps.Map()
crea un nuovo oggetto Google Maps. La proprietà center
indica all'API dove centrare la mappa.
Scopri di più su come ricevere coordinate di latitudine/longitudine o convertire un indirizzo in coordinate geografiche.
La proprietà zoom
specifica il livello di zoom per la mappa. Zoom: 0 è lo zoom più basso
e mostra l'intero pianeta. Imposta un valore di zoom più alto per ingrandire la Terra a risoluzioni maggiori.
Il codice riportato di seguito inserisce un indicatore sulla mappa. La proprietà position
imposta la posizione dell'indicatore.
TypeScript
// The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, });
JavaScript
// The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, });
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:
Vai alla console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API e i servizi correlati.
Nella pagina Credenziali, ottieni una chiave API (e imposta le restrizioni per la chiave API). Nota: puoi utilizzare una chiave API senza restrizioni esistente o con restrizioni del browser.
Per prevenire il furto di quota e proteggere la chiave API, consulta la sezione Utilizzo di chiavi API.
Abilitare la fatturazione. Per ulteriori informazioni, consulta la pagina Utilizzo e fatturazione.
Copia l'intero codice di questo tutorial da questa pagina nel tuo editor di testo.
Sostituisci il valore del parametro
key
nell'URL con la chiave API personale, ovvero la chiave API appena ottenuta.<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
Salva questo file con un nome che termina con
.html
, ad esempioindex.html
.Carica il file HTML in un browser web trascinandolo dal desktop al browser. In alternativa, il doppio clic sul file funziona sulla maggior parte dei sistemi operativi.
Suggerimenti e risoluzione dei problemi
- Puoi modificare opzioni quali stile e proprietà per personalizzare la mappa. Per scoprire di più 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 i passaggi riportati di seguito per visualizzare le coordinate di latitudine e longitudine di una sede su Google Maps.
- Apri Google Maps in un browser.
- Fai clic con il tasto destro del mouse sulla posizione esatta sulla mappa per cui hai bisogno di coordinate.
- Seleziona Che cosa c'è qui dal menu contestuale che viene visualizzato. La mappa mostra una scheda nella parte inferiore dello schermo. Trova le coordinate della latitudine e della 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 di geocodifica.