Per iniziare

In questo tutorial ti guiderai nella creazione della tua prima applicazione JavaScript utilizzando Mappe 3D fotorealistiche in Maps JavaScript: una finestra di base 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 alcun software aggiuntivo.

  1. Apri un editor di testo di tua scelta.
  2. 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 un elemento HTML personalizzato 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 sostituire YOUR_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 mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

Eseguire l'applicazione

Per eseguire l'applicazione e visualizzare l'output, segui questi passaggi:

  1. Salva il file HTML che hai creato.
  2. 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").
  3. Dovresti vedere la mappa nella finestra del browser.

Complimenti! Hai appena scritto un'applicazione utilizzando Mappe 3D fotorealistiche di Google nell'API Maps JavaScript.

Passaggi successivi

  • Crea esperienze più complicate delle mappe 3D utilizzando gli esempi esistenti di Google.
  • Scopri il pieno potenziale delle mappe 3D fotorealistiche nell'API Maps JavaScript leggendo la documentazione di riferimento.