Descripción general

Las funciones con tecnología WebGL para la API de Maps JavaScript te permiten controlar la inclinación y la rotación, agregar objetos 3D directamente al mapa y mucho más. Se incluyen las siguientes funciones:

Comenzar

Para usar las nuevas funciones de WebGL, debes usar un mapa de vectores. En esta sección, se muestra cómo hacerlo.

Especifica la opción renderingType

Usa la opción renderingType para especificar el tipo de renderización de trama o vectorial para tu mapa (no se requiere un ID de mapa):

  1. Carga la biblioteca RenderingType. Esto se puede hacer cuando se carga la biblioteca de Maps:

    const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  2. Cuando inicialices el mapa, usa la opción renderingType para especificar RenderingType.VECTOR o RenderingType.RASTER:

    map = new Map(   document.getElementById('map') as HTMLElement,   {     zoom: 4,     center: position,     renderingType: RenderingType.VECTOR,   } );

La opción renderingType anula cualquier configuración de tipo de renderización que se haya realizado al configurar un ID de mapa.

  • Para habilitar la inclinación y la rotación, establece la opción de mapa tiltInteractionEnabled en verdadero o llama a map.setTiltInteractionEnabled.
  • Para habilitar el desplazamiento, establece la opción de mapa headingInteractionEnabled en true o llama a map.setHeadingInteractionEnabled.

Usa un ID de mapa para establecer el tipo de renderización

También puedes especificar el tipo de renderización con un ID de mapa. Para crear un ID de mapa nuevo, sigue los pasos que se indican en Cómo usar el diseño de mapas basado en Cloud: Obtén un ID de mapa. Asegúrate de configurar el tipo de mapa como JavaScript y seleccionar la opción Vector. Marca las opciones Inclinación o Rotación para habilitar la inclinación y la rotación en el mapa. Esto te permitirá ajustar estos valores de manera programática y también permite que los usuarios ajusten la inclinación y la orientación directamente en el mapa. Si el uso de la inclinación o la orientación afecta negativamente el funcionamiento de tu app, deja sin marcar las opciones Inclinación y Rotación para que los usuarios no puedan ajustar estos parámetros.

Cómo crear un ID de mapa de vectores

A continuación, actualiza el código de inicialización del mapa con el ID de mapa que creaste. Puedes encontrar tus IDs de mapa en la página Administración de mapas. Proporciona un ID de mapa cuando crees una instancia del mapa con la propiedad mapId, como se muestra a continuación:

map = new google.maps.Map(document.getElementById('map'), {   center: {lat: -34.397, lng: 150.644},   zoom: 8,   mapId: 'MAP_ID' });

Usa el elemento <gmp-map>

Los mapas de vectores, la inclinación y la orientación están habilitados de forma predeterminada cuando se usa el elemento <gmp-map>, que te permite agregar un mapa a tu página con HTML. Obtén más información.

Ejemplos

Consulta los siguientes ejemplos para demostrar estas funciones: