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 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 de vectores para obtener la mejor experiencia del usuario, ya que proporciona una fidelidad visual mejorada, 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 del mapa 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> tienen como valor predeterminado el tipo de renderización de vectores.
Los mapas que usan un elemento <div> con google.maps.Map tienen como valor predeterminado el tipo de renderización de trama.

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 realice mediante la configuración de 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). 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 establecer la opción renderingType:

Carga la biblioteca RenderingType. Esto se puede hacer cuando se carga la biblioteca de Maps:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps");
```

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 map.setTiltInteractionEnabled(true).
Para habilitar el desplazamiento panorámico, establece la opción de mapa headingInteractionEnabled en true o llama a map.setHeadingInteractionEnabled(true).

Para 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 orientación habilitado. Para establecer el tipo de renderización con el elemento <gmp-map>, usa el rendering-type atributo.

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 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'
});

Detecta qué tipo de renderización está en uso

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()}`);
  });```