Iniziamo

In questo tutorial, ti guiderai attraverso la 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 Marin Headlands sullo sfondo.

Dopo aver completato il tutorial, dovresti visualizzare la seguente mappa nel tuo ambiente di sviluppo:

Configura l'ambiente

Prima di iniziare a scrivere codice, devi configurare un ambiente che esegue JavaScript. Per questo tutorial, utilizzerai un browser web come ambiente. Tutti i browser web moderni supportano JavaScript integrato, quindi non devi installare altro software.

  1. Apri un editor di testo a tua scelta.
  2. Crea un nuovo file e salvalo con un'estensione .html (ad es. hello-p3djs.html).

Scrivi una pagina HTML

Per iniziare, crea 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, dovrai aggiungere il codice JavaScript per caricare la mappa. Il codice contiene due elementi:

  • gmp-map-3d contiene i parametri utilizzati per inizializzare la posizione e la visualizzazione 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 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 visualizzare l'output:

  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 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 programma utilizzando le mappe 3D fotorealistiche dell'API Maps JavaScript di Google.

Passaggi successivi

  • Crea esperienze più complesse in relazione alle mappe 3D utilizzando gli esempi esistenti di Google.
  • Scopri tutto il potenziale di Maps in 3D nell'API Maps JavaScript leggendo la documentazione di riferimento.