Tipo de renderização (raster e vetor)

A API Maps JavaScript oferece duas implementações diferentes do mapa: vetorial e de varredura. O mapa rasterizado carrega o mapa como uma grade de blocos de imagens rasterizadas baseadas em pixels, que são geradas do lado do servidor pela Plataforma Google Maps e, em seguida, disponibilizadas para seu app da Web. O mapa vetorial é composto por blocos vetoriais, que são desenhados no tempo de carregamento no lado do cliente usando o WebGL, uma tecnologia da Web que permite que o navegador acesse a GPU no dispositivo do usuário para renderizar gráficos 2D e 3D.

O tipo de mapa vetorial é recomendado para a melhor experiência do usuário, porque oferece maior fidelidade visual, melhor armazenamento em cache nos mapas e a capacidade de controlar a inclinação e a direção no mapa. Saiba mais sobre os recursos do mapa vetorial.

Tipo de renderização padrão

O tipo de renderização padrão do mapa varia de acordo com a implementação.

  • Os mapas que usam o elemento <gmp-map> têm como padrão o tipo de renderização vetorial.

  • Os mapas que usam um elemento <div> com google.maps.Map usam o tipo de renderização rasterizada por padrão.

Defina o tipo de renderização de um mapa especificando a opção de mapa renderingType ou definindo a opção em um ID de mapa associado. A opção renderingType substitui as configurações de tipo de renderização feitas ao configurar um ID de mapa.

Especifique a opção renderingType.

Use a opção renderingType para especificar o tipo de renderização rasterizada ou vetorial do seu mapa (não é necessário um ID de mapa). Para mapas carregados usando um elemento div e JavaScript, o tipo de renderização padrão é google.maps.RenderingType.RASTER. Siga estas etapas para definir a opção renderingType:

  1. Carregue a biblioteca RenderingType, o que pode ser feito ao carregar a biblioteca do Maps:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. Ao inicializar o mapa, use a opção renderingType para especificar RenderingType.VECTOR ou RenderingType.RASTER:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Quando o tipo de renderização do mapa vetorial estiver definido, você precisará definir as opções para os recursos necessários.

  • Para ativar a inclinação, defina a opção de mapa tiltInteractionEnabled como true ou chame map.setTiltInteractionEnabled(true).
  • Para ativar a movimentação, defina a opção de mapa headingInteractionEnabled como true ou chame map.setHeadingInteractionEnabled(true).

Para mapas carregados usando o elemento <gmp-map>, o tipo de renderização padrão é google.maps.RenderingType.VECTOR, com o controle de inclinação e direção ativado. Para definir o tipo de renderização usando o elemento <gmp-map>, use o atributo rendering-type.

Usar um ID do mapa para definir o tipo de renderização

Também é possível especificar o tipo de renderização usando um ID de mapa. Crie um ID de mapa seguindo as etapas em Usar a estilização de mapas baseada na nuvem: obter um ID de mapa. Defina o tipo de mapa como JavaScript e selecione uma opção (Vetor ou Raster). Marque Inclinação e Rotação para ativar essas ações no mapa. Com isso, você ajusta de forma programática esses valores, e os usuários ajustam a inclinação e a direção no mapa. Se o uso de inclinação ou direção afetar negativamente seu app, deixe as opções Inclinação e Rotação desmarcadas para que não possam ser ajustadas pelos usuários.

Criar ID de mapa vetorial

Em seguida, atualize o código de inicialização do mapa com o ID que você criou. Você pode encontrar seus IDs de mapa na página Gerenciamento de mapas. Informe um ID ao instanciar o mapa usando a propriedade mapId, conforme mostrado aqui:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Detectar qual tipo de renderização está em uso

Para detectar qual tipo de renderização é usado, chame getRenderingType() no objeto de mapa, conforme mostrado no exemplo a seguir:

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