Comenzar

En este instructivo, te guiaremos para que crees tu primera aplicación de JavaScript con Maps 3D fotorrealista en Maps JavaScript: una ventana básica que muestra una vista aérea del puente Golden Gate con Marin Headlands en el fondo.

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 instalar ningún 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 básica HTML:

<!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 un elemento HTML personalizado 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 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>

Ejecuta la aplicación

Para ejecutar la aplicación 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 con el botón derecho y usar "Abrir con").
  3. Deberías ver el mapa en la ventana de tu navegador.

¡Felicitaciones! Acabas de escribir una aplicación con mapas 3D fotorrealistas de Google en la API de Maps JavaScript.

Próximos pasos

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