Suporte

Esta página lista problemas conhecidos e soluções alternativas para mapas de vetor e recursos WebGL.

Compatibilidade com navegadores/dispositivos

A prévia do recurso 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 https://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 raster.

Raster ou vetor?

Em algumas ocasiões, um mapa vetorial pode ser convertido para raster. 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: ativado"
• "WebGL: hardware acelerado"
• "WebGL2: hardware acelerado"

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.

• Saiba como mudar as preferências de sites no Safari.
• Saiba mais sobre as configurações de performance do Firefox.

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

É possível fazer isso chamando map.getRenderingType(). Confira no exemplo a seguir o código para monitorar o evento renderingtype_changed e uma janela de informações que mostra se um mapa vetorial ou raster 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

Observação: leia o guia sobre como usar o TypeScript e o Google Maps.

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 da Web para dispositivos móveis e usar um ID do mapa associado a um mapa de rasterização em vez de um mapa vetorial. A renderização vai ser mais lenta em alguns dispositivos móveis. Se você usar mapas vetoriais na Web para dispositivos móveis, ficaríamos felizes de 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 ser substituído automaticamente pelo uso de um mapa rasterizado.

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 FPS ou instabilidade, como é feita a comparação delas entre mapas de vetor e de rasterização?
• 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 performance para aprimorar esse recurso.