Asistencia

En esta página, se enumeran algunos problemas frecuentes y soluciones alternativas para los mapas de vectores y las funciones de WebGL.

Compatibilidad con navegadores y dispositivos

La vista previa de las funciones de WebGL admite los mismos navegadores y dispositivos que la API de Maps JavaScript. Para verificar si el navegador de un dispositivo en particular es compatible con WebGL, visita get.webgl.org o caniuse.com. También asegúrate de que la aceleración de hardware esté habilitada en la configuración del navegador. De lo contrario, los mapas de vectores volverán a ser de trama.

¿Mapa de trama o vectores?

En ocasiones, un mapa de vectores puede volver a ser de trama. Cuando esto sucede, los elementos que dependen del mapa de vectores dejan de estar disponibles. El regreso a un mapa de trama puede ocurrir por varias razones. En esta sección, se muestra cómo configurar correctamente tu navegador web y cómo comprobar de manera programática si la capability del mapa de vectores se encuentra activa.

Verifica las capabilities del navegador en Chrome

Para determinar qué capabilities de aceleración de hardware se encuentran habilitadas en una instalación específica de Chrome, navega a chrome://gpu/ y asegúrate de que los siguientes elementos estén habilitados (en verde):

  • "OpenGL: Enabled"
  • "WebGL: Hardware accelerated"
  • "WebGL2: Hardware accelerated"

(Estos son solo requisitos de referencia; puede haber otros factores que afecten la compatibilidad. Consulta la sección "Errores conocidos" a continuación).

Cómo habilitar la aceleración de hardware

En la mayoría de los navegadores, la aceleración de hardware debe estar habilitada para que se admitan los mapas de vectores. Para habilitar la aceleración de hardware en Chrome y Microsoft Edge, abre Configuración, selecciona Sistema y asegúrate de que la opción Usar aceleración de hardware cuando esté disponible se encuentre habilitada.

Verifica si un mapa es de trama o vectores de forma programática

Para comprobar de manera programática si un mapa es de trama o vectores, llama a map.getRenderingType(). En el siguiente ejemplo, se muestra el código necesario para supervisar el evento renderingtype_changed y una ventana de información en la que se indica si se está usando un mapa de vectores o de trama.

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

También puedes usar el contexto de renderización de WebGL para verificar la compatibilidad con WebGL 2:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

Descubre otras maneras de detectar el contexto de renderización de WebGL de manera programática.

Compatibilidad con la Web móvil

La compatibilidad de los mapas de vectores con la Web móvil aún se encuentra en etapa experimental. Los desarrolladores pueden utilizar APIs de cliente para detectar navegadores de la Web móvil y usar un ID de mapa asociado con un mapa de trama en lugar de un mapa de vectores. Prevemos un rendimiento de renderización más lenta para algunos dispositivos móviles. Si eliges usar mapas de vectores en la Web móvil, agradecemos que nos envíes tus estadísticas de rendimiento y comentarios. Como se muestra más arriba, si la compatibilidad con mapas de vectores no está disponible, los IDs de mapas de vectores recurrirán automáticamente a los mapas de trama.

Errores

Errores conocidos

  • Hay un problema conocido en Chrome en algunos dispositivos macOS con GPUs AMD. Esto puede ser especialmente confuso cuando macOS cambia dinámicamente de una GPU a otra en dispositivos que tienen varias GPUs; en esos casos, los mapas de vectores pueden no estar disponibles según qué otras apps se estén ejecutando o si hay un monitor externo conectado. En algunos casos, el problema parece resolverse al activar el próximo backend ANGLE Metal de Chrome. Puedes seguir los planes del lanzamiento general en https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Cómo informar errores

  • Actualiza el navegador y el controlador de GPU a la versión más reciente antes de informar el error.
  • Asegúrate de que esté habilitado el parámetro de configuración de la aceleración de hardware en chrome://settings/system (Chrome), about:preferences#general (Firefox) y edge://settings/system (Microsoft Edge). En Safari, este parámetro de configuración se habilita automáticamente en macOS 10.15 o versiones posteriores. Si usas una versión anterior de MacOS, ve a la configuración avanzada de Safari y asegúrate de que la opción "Usar aceleración de hardware" esté habilitada.
  • Incluye el vínculo del código de muestra jsfiddle en el informe de errores.
  • Si tienes algún problema de renderización, toma una captura de pantalla de chrome://gpu (Chrome), about:support (Firefox) o edge://gpu (Microsoft Edge) y adjunta los datos de la GPU en el informe de errores.

¡Danos tu opinión!

Valoramos tus comentarios mientras trabajamos para ofrecerte la mejor experiencia posible en mapas de vectores a ti y tus usuarios finales. Infórmanos si sucede lo siguiente:

  • Detectas errores nuevos de JavaScript o fallas/errores en tus apps web.
  • La latencia en el inicio de los mapas de vectores es mucho peor que la de los mapas de tramas. Si es así, las métricas de regresión de latencia de inicio son muy útiles. A grandes rasgos, queremos saber si esta latencia supera los umbrales aceptables.
  • La experiencia de los mapas de vectores no es tan fluida como podría ser. Si registras métricas de FPS o de bloqueo, ¿cómo se comparan en los mapas de vectores y los de trama?
  • El rendimiento difiere mucho según el navegador.

Si configuraste pruebas A/B para comparar mapas de vectores y mapas de tramas, comparte tus comentarios sobre el rendimiento obtenido, ya que será muy útil para ayudarnos a definir mejor la función.