Comenzar

En este instructivo, te guiaremos para que crees tu primer programa en JavaScript con mapas fotorrealistas en 3D en Maps JavaScript: una ventana simple que muestra una vista aérea del Puente Golden Gate con las penínsulas de Marin en el fondo.

Cuando 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 necesitas 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).

Cómo escribir 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>

Cómo agregar 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 de la cámara de partida.
  • 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" range="2000" tilt="75" heading="330"></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 del navegador.

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

Próximos pasos

  • Compila experiencias de mapas 3D más complejas con los ejemplos existentes de Google.
  • Descubre todo el potencial de los mapas en 3D de la API de Maps JavaScript leyendo la documentación de referencia.