Comenzar

En este instructivo, te guiaremos para crear tu primer programa de JavaScript con mapas 3D fotorrealistas en Maps JavaScript: una ventana simple que muestra una vista aérea del puente Golden Gate con el cabo Marin en segundo plano.

Una vez que completes el instructivo, deberías ver el siguiente mapa en tu entorno de desarrollo:

Configura tu entorno.

Antes de comenzar a escribir código, debes configurar un entorno que ejecute JavaScript. En este instructivo, usarás un navegador web como entorno. Todos los navegadores web modernos tienen compatibilidad integrada con JavaScript, por lo que no es necesario que instales software adicional.

  1. Abre el editor de texto que prefieras.
  2. Crea un archivo nuevo y guárdalo con una extensión .html (p.ej., hello-p3djs.html).

Escribe una página HTML

Para comenzar, crearás una página web con una estructura HTML básica:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

Agrega JavaScript

A continuación, agregarás código JavaScript para cargar el mapa. El código contiene dos elementos:

  • gmp-map-3d contiene los parámetros que se usan para inicializar la posición y la vista iniciales de la cámara.
  • script contiene la llamada para cargar la API de Maps JavaScript. Asegúrate de reemplazar YOUR_KEY por tu clave de 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>

Cómo ejecutar el programa

Para ejecutar el programa y ver el resultado, sigue estos pasos:

  1. Guarda el archivo HTML que creaste.
  2. Abre el archivo en un navegador web (puedes hacer doble clic en el archivo, arrastrarlo a una ventana del navegador o hacer clic derecho y usar "Abrir con").
  3. Deberías ver el mapa en la ventana de tu navegador.

¡Felicitaciones! Acabas de escribir un programa con los mapas 3D fotorrealistas de la API de Maps JavaScript de Google.

Próximos pasos

  • Crea experiencias de mapas 3D más complicadas con las muestras existentes de Google.
  • Descubre todo el potencial de los mapas 3D en la API de Maps JavaScript en la documentación de referencia.