In questo tutorial, ti guiderai nella creazione del tuo primo programma JavaScript utilizzando Mappe 3D fotorealistiche in Maps JavaScript: una semplice finestra che mostra una vista dall'alto del Golden Gate Bridge con i Marin Headlands sullo sfondo.
Una volta completato il tutorial, dovresti vedere la seguente mappa nel tuo ambiente di sviluppo:
Configura l'ambiente
Prima di iniziare a scrivere il codice, devi configurare un ambiente che esegue JavaScript. Per questo tutorial, utilizzerai un browser web come ambiente. Tutti i browser web moderni hanno il supporto integrato per JavaScript, quindi non è necessario installare altro software.
- Apri un editor di testo di tua scelta.
- Crea un nuovo file e salvalo con un'estensione di
.html
(ad es.hello-p3djs.html
).
Scrivi una pagina HTML
Per iniziare, dovrai creare una pagina web con una struttura HTML di base:
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
Aggiungi JavaScript
Successivamente, aggiungerai codice JavaScript per caricare la mappa. Il codice contiene due elementi:
gmp-map-3d
contiene i parametri utilizzati per inizializzare la posizione e la vista iniziali della fotocamera.script
contiene la chiamata per caricare l'API Maps JavaScript. Assicurati di sostituireYOUR_KEY
con la tua chiave API.
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
Esegui il programma
Per eseguire il programma e vedere l'output, segui questi passaggi:
- Salva il file HTML che hai creato.
- Apri il file in un browser web (puoi fare doppio clic sul file, trascinarlo in una finestra del browser oppure puoi fare clic con il tasto destro del mouse e utilizzare "Apri con").
- Dovresti vedere la mappa nella finestra del browser.
Complimenti! Hai appena scritto un programma utilizzando le mappe 3D fotorealistiche dell'API Maps JavaScript di Google.
Passaggi successivi
- Crea esperienze più complicate delle mappe 3D utilizzando gli esempi esistenti di Google.
- Scopri il pieno potenziale di Maps 3D nell'API Maps JavaScript leggendo la documentazione di riferimento.