Comenzar

Selecciona la plataforma: Android iOS JavaScript

En este instructivo, te guiarás para crear tu primera aplicación JavaScript con mapas en 3D en Maps JavaScript: una ventana básica que muestra una vista aérea del puente Golden Gate con Marin Headlands 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 la 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:

<html>
  <head>
      <title>Map</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 de la cámara iniciales.
  • script contiene la llamada para cargar la API de Maps JavaScript. Asegúrate de reemplazar YOUR_KEY por tu clave de 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>

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 él, 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 una aplicación con los mapas en 3D de la API de Maps JavaScript de Google.

Próximos pasos

  • Crea experiencias de mapas en 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.