Comenzar

En este instructivo, te guiaremos para que crees tu primer programa de JavaScript con los mapas fotorrealistas en 3D de Maps JavaScript: una ventana simple 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 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>

Ejecuta 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 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 un programa con mapas en 3D fotorrealistas de la API de Maps JavaScript de Google.

Próximos pasos

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