Suporte

Esta página lista problemas conhecidos e soluções alternativas para mapas vetoriais e elementos WebGL.

Compatibilidade com navegadores/dispositivos

A prévia do elemento WebGL é compatível com os mesmos navegadores e dispositivos da API Maps JavaScript. Para verificar se o navegador em um dispositivo específico é compatível com WebGL, acesse get.webgl.org ou caniuse.com (links em inglês). Confira se a aceleração de hardware está ativada nas configurações do navegador. Caso contrário, os mapas vetoriais serão revertidos para rasterizados.

Rasterizado ou vetorial?

Em algumas ocasiões, um mapa vetorial pode ser convertido para rasterizado. Quando isso acontece, os recursos que dependem do mapa vetorial ficam indisponíveis. Essa conversão pode ocorrer por vários motivos. Nesta seção, mostramos como configurar corretamente seu navegador da Web e como verificar de modo programático a possibilidade de usar um mapa vetorial.

Verificar os recursos do navegador no Chrome

Para determinar quais recursos de aceleração de hardware estão habilitados em uma instalação específica do Chrome, acesse chrome://gpu/ e verifique se os seguintes itens estão ativados (em verde):

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

Esses são apenas requisitos de referência, porque é possível que haja outros fatores que afetam a compatibilidade. Confira "Bugs conhecidos" abaixo.

Ativar a aceleração de hardware

Para oferecer suporte a mapas vetoriais, a aceleração de hardware precisa estar ativada na maioria dos navegadores. Se quiser habilitar esse recurso no Chrome e no Microsoft Edge, abra Configurações, selecione Sistema e verifique se a opção Usar aceleração de hardware quando disponível está ativada.

Verificar de modo programático se um mapa é rasterizado ou vetorial

É possível fazer isso chamando map.getRenderingType(). Confira no exemplo a seguir o código para monitorar o evento renderingtype_changed e mostrar uma janela de informações que indica se um mapa vetorial ou rasterizado está em uso.

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

Também é possível usar o contexto de renderização WebGL para verificar a compatibilidade com o WebGL 2:

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

Aprenda outras maneiras de detectar o contexto de renderização WebGL de modo programático.

Suporte da Web para dispositivos móveis

A compatibilidade com a Web para dispositivos móveis em mapas vetoriais está na fase experimental. Os desenvolvedores podem usar APIs de clientes para detectar navegadores para dispositivos móveis e usar um ID de mapa associado a um mapa rasterizado em vez de um mapa vetorial. A renderização vai ser mais lenta em alguns dispositivos móveis. Se você escolher os mapas vetoriais para usar na Web para dispositivos móveis, será ótimo receber estatísticas e feedback sobre a performance. Como mostrado acima, se não houver compatibilidade com mapas vetoriais, um ID de mapa vetorial vai ativar automaticamente um mapa rasterizado substituto.

Bugs

Bugs conhecidos

  • Existe um problema conhecido no Chrome em alguns dispositivos macOS com GPUs AMD. Isso pode ser particularmente confuso quando o macOS alterna dinamicamente entre GPUs em dispositivos com várias GPUs. Portanto, os mapas vetoriais podem não estar disponíveis dependendo de quais outros aplicativos estão em execução ou caso haja um monitor externo conectado. Em alguns casos, ativar o back-end ANGLE Metal do Chrome, que será lançado em breve, corrige esse problema. Siga os planos de lançamento gerais em https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Informar bugs

  • Atualize o navegador e o driver da GPU para a versão mais recente antes de informar o bug.
  • Verifique se a configuração de aceleração de hardware em chrome://settings/system (Chrome), about:preferences#general (Firefox) e edge://settings/system (Microsoft Edge) está ativada. No Safari, essa configuração é ativada automaticamente na versão 10.15 ou mais recente do macOS. Para versões mais antigas do macOS, acesse as configurações avançadas do Safari e verifique se a opção "Usar aceleração de hardware" está ativada.
  • Inclua o link de exemplo de código jsfiddle no relatório do bug.
  • Faça uma captura de tela do chrome://gpu (Chrome), about:support (Firefox) ou edge://gpu (Microsoft Edge). Em caso de problemas de renderização, anexe informações relacionadas à GPU no relatório do bug.

O que você acha?

Seu feedback é importante para que possamos oferecer a melhor experiência de mapa vetorial para você e seus usuários finais. Conte para nós se:

  • Encontrar erros de JavaScript ou bugs/falhas nos seus apps da Web.
  • A latência de inicialização dos mapas vetoriais for significativamente pior do que a dos mapas rasterizados. Se esse for o caso, as métricas de regressão de latência de inicialização vão ser muito úteis. De modo geral, queremos saber se a latência de inicialização é afetada além de limites aceitáveis.
  • A experiência dos mapas vetoriais não for simples. Se você registrar métricas de QPS ou instabilidade, quais têm desempenho melhor, as dos mapas vetoriais ou as dos rasterizados?
  • A performance muda bastante de um navegador para o outro.

Se você configurou o teste A/B para comparar os mapas vetoriais e rasterizados, compartilhe feedbacks de desempenho para aprimorar esse recurso.