Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

In questo tutorial, imparerai a creare la tua prima applicazione JavaScript utilizzando 3D Maps in Maps JavaScript: una finestra di base che mostra una visualizzazione dall'alto del Golden Gate Bridge con le Marin Headlands sullo sfondo.

Al termine del 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 esegua JavaScript. Per questo tutorial, utilizzerai un browser web come ambiente. Tutti i browser web moderni hanno il supporto integrato per JavaScript, quindi non devi installare software aggiuntivo.

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

Scrivi una pagina HTML

Per iniziare, crea una pagina web con una struttura HTML di base:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

Aggiungi JavaScript

Poi, aggiungi 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 visualizzazione della fotocamera iniziale.
  • script contiene la chiamata per caricare l'API Maps JavaScript. Assicurati di sostituire YOUR_KEY con la tua chiave API.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Eseguire l'applicazione

Per eseguire l'applicazione 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 o 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 l'API Maps JavaScript di Google con 3D Maps.

Passaggi successivi

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