Tipo de renderización (raster y vector)

La API de Maps JavaScript ofrece dos implementaciones del mapa diferentes: de trama y de vectores. El mapa de trama es la opción predeterminada y carga el mapa como una cuadrícula de mosaicos de imágenes de trama basados en píxeles, que el servidor de Google Maps Platform genera y luego publica en tu app web. El mapa de vectores está compuesto de mosaicos basados en vectores, los cuales se dibujan en el momento de la carga por parte del cliente mediante WebGL, una tecnología web que permite al navegador acceder a la GPU del dispositivo del usuario para renderizar gráficos 2D y 3D. Se recomienda el tipo de mapa vectorial para brindar la mejor experiencia del usuario, ya que proporciona una fidelidad visual mejorada, así como la capacidad de controlar la inclinación y la orientación en el mapa. Obtén más información sobre los componentes de mapas vectoriales.

Para establecer el tipo de renderización de un mapa, especifica la opción de mapa renderingType o configura la opción en un ID de mapa asociado. La opción renderingType anula cualquier configuración de tipo de renderización que se haya establecido configurando un ID de mapa.

Especifica la opción renderingType

Usa la opción renderingType para especificar el tipo de renderización de trama o vector para tu mapa (no se requiere un ID de mapa). Para los mapas cargados con un elemento div y JavaScript, el tipo de renderización predeterminado es google.maps.RenderingType.RASTER. Sigue estos pasos para configurar la opción renderingType:

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

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

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

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

Cuando se establece el tipo de renderización del mapa vectorial, debes configurar las opciones de los componentes necesarios.

  • Para habilitar la inclinación, establece la opción de mapa tiltInteractionEnabled en true o llama a map.setTiltInteractionEnabled(true).
  • Para habilitar el desplazamiento panorámico, establece la opción de mapa headingInteractionEnabled en true o llama a map.setHeadingInteractionEnabled(true).

En el caso de los mapas cargados con el elemento <gmp-map>, el tipo de renderización predeterminado es google.maps.RenderingType.VECTOR, con el control de inclinación y rumbo habilitado. Para establecer el tipo de renderización con el elemento <gmp-map>, usa el atributo rendering-type.

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 selecciona una opción (Vector o Trama). Marca las opciones Inclinación y 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 los IDs de tus mapas 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'
});