Descripción general

Los mapas en 3D de Maps JavaScript te ayudan a crear experiencias de mapas inmersivas en 3D. Proporciona herramientas para personalizar el diseño de mapas, mejorar la accesibilidad y optimizar la usabilidad, lo que permite desarrollar aplicaciones atractivas e interactivas.

A continuación se muestra un ejemplo de lo que puedes hacer con los mapas en 3D de la API de Maps JavaScript:

Por qué usar mapas en 3D en la API de Maps JavaScript

Los mapas en 3D de Maps JavaScript proporcionan la clase Map3DElement (<gmp-map-3d>) en la biblioteca maps3d para que puedas usar las imágenes en 3D de Google en tus aplicaciones. Los mapas en 3D proporcionan una experiencia de renderización en 3D integrada, lo que te permite incorporar entornos del mundo real en 3D, vistas de ciudades y recorridos por puntos de referencia, o bien experimentar con ellos.

Usa <gmp-map-3d> 3D (Map3DElement en la biblioteca maps3d) para terrenos 3D, inclinación de la cámara, rumbo y sobrevuelos de rango, edificios 3D extruidos y objetos 3D, como Marker3DElement (<gmp-marker-3d>). Para mapas de rutas 2D planos, pines AdvancedMarkerElement 2D estándar y diseño de vectores 2D, usa <gmp-map> 2D (MapElement o google.maps.Map en la biblioteca maps).

¿Qué puedes hacer con los mapas en 3D de Maps JavaScript?

• Crea experiencias de mapas del mundo real: Renderiza imágenes aéreas fotorrealistas en 3D de ciudades, terrenos y puntos de referencia en el modo SATELLITE o HYBRID (que superpone etiquetas de mapa base en imágenes satelitales), o bien muestra un mapa base 3D con diseño en el modo ROADMAP con la propiedad mode. Para obtener más información, consulta Cómo cambiar el modo de mapa.
• Personaliza el diseño del mapa:
  • Diseño de mapas basado en Cloud en 3D: Controla la visibilidad y el diseño de los lugares de interés (POI) y las rutas del mapa base. Para obtener más información, consulta Cómo personalizar mapas en 3D.
  • Marcadores, ventanas emergentes, polilíneas y polígonos personalizados: Identifica ubicaciones y dibuja rutas o límites en 3D en el mapa con MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement y Polygon3DElement. Para obtener más información, consulta Marcadores, Ventanas emergentes y Formas y líneas.
  • Modelos 3D y recursos glTF: Agrega modelos 3D glTF de PBR personalizados de edificios, puntos de referencia u objetos en coordenadas del mundo real con Model3DElement. Para obtener más información, consulta Modelos.
• Crea mapas envolventes:
  • Rutas de cámara predeterminadas: Guía a los usuarios por tu mapa en 3D con sobrevuelos de cámara y animaciones orbitales predefinidos usando flyCameraTo y flyCameraAround. Para obtener más información, consulta Cómo animar rutas de cámara.
  • Controla la interacción del usuario: Personaliza los controles y el movimiento de la cámara disponibles para tus usuarios. Para obtener más información, consulta Controles y exploración de mapas en 3D, Restringe la vista y los límites de la cámara y Controla la posición de la cámara.

Ejemplo rápido

Para cargar la biblioteca maps3d y renderizar un elemento <gmp-map-3d> con mode="HYBRID", center (lat,lng,altitude), range, tilt y heading, usa el siguiente fragmento:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

Reemplaza YOUR_API_KEY por tu clave de API de Google Maps Platform.

Cómo usar mapas en 3D en Maps JavaScript

Cobertura

Las mallas de edificios 3D y puntos de referencia fotorrealistas están disponibles en áreas metropolitanas seleccionadas de los países y las regiones admitidos. En las regiones sin cobertura de malla 3D (como India), <gmp-map-3d> renderiza imágenes satelitales o de mapas de ruta en 2D superpuestas sobre la elevación del terreno en 3D sin edificios 3D extruidos. Para mostrar un punto de referencia en un área sin cobertura de malla 3D, puedes colocar un modelo 3D glTF personalizado en sus coordenadas con Model3DElement o usar un <gmp-map> en 2D. Para conocer la disponibilidad por país (en la columna Maps JavaScript 3D), consulta Detalles de la cobertura de Google Maps Platform.

Próximos pasos

• Consulta la guía de introducción para crear un mapa en 3D ("Hello World!"). Mapa 3D.
• Prueba el codelab introductorio para explorar cómo agregar componentes al mapa.
• Amplía tus conocimientos sobre los marcadores y la animación en el siguiente codelab.
• Explora la colección de muestras de Google para encontrar el código que se adapte mejor a tu caso de uso.