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 carga el mapa como una cuadrícula de mosaicos de imágenes de trama basados en píxeles, que se generan en el servidor de Google Maps Platform y, luego, se entregan a tu app web. El mapa de vectores se compone de mosaicos basados en vectores, que se dibujan en el momento de la carga en el cliente con WebGL, una tecnología web que permite que el navegador acceda a la GPU en el dispositivo del usuario para renderizar gráficos en 2D y 3D.

Se recomienda el tipo de mapa de vectores para obtener la mejor experiencia del usuario, ya que proporciona una mayor fidelidad visual, un mejor almacenamiento en caché en los mapas y la capacidad de controlar la inclinación y la orientación en el mapa. Obtén más información sobre las funciones de los mapas de vectores.

Tipo de renderización predeterminado

El tipo de renderización predeterminado del mapa varía según tu implementación.

  • Los mapas que usan el elemento <gmp-map> se renderizan de forma predeterminada como mapas de vectores.

  • Los mapas que usan un elemento <div> con google.maps.Map se renderizan de forma predeterminada como mapas de trama.

Para establecer el tipo de renderización de un mapa, especifica la opción de mapa renderingType o configúrala en un ID de mapa asociado. La opción renderingType anula cualquier parámetro de configuración del tipo de renderización que se haya establecido con un ID de mapa.

Especifica la opción renderingType

Usa la opción renderingType para especificar el tipo de renderización de trama o de vectores para tu mapa (no se requiere un ID de mapa). En el caso de los mapas que se cargan con un elemento div y JavaScript, el tipo de renderización predeterminado es google.maps.RenderingType.RASTER. Sigue estos pasos para establecer 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 de vectores, debes configurar las opciones para las funciones necesarias.

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

En el caso de los mapas que se cargan con el elemento <gmp-map>, el tipo de renderización predeterminado es google.maps.RenderingType.VECTOR, con el control de inclinación y orientación 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, 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 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 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'
});

Detecta qué tipo de renderización se está usando

Para detectar qué tipo de renderización se usa, llama a getRenderingType() en el objeto de mapa, como se muestra en el siguiente ejemplo:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```