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 gerados no lado do servidor da Plataforma Google Maps e disponibilizados ao seu app da Web. O mapa vetorial é composto de blocos baseados em vetores, 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, já que oferece fidelidade visual aprimorada, melhor capacidade de armazenamento em cache em todos os 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 têm como padrão o tipo de renderização raster.

Defina o tipo de renderização de um mapa especificando a opção renderingType ou definindo a opção em um ID de mapa associado. A opção renderingType substitui todas 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 mapa (não é necessário um ID do 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:

Carregue a biblioteca RenderingType. Isso pode ser feito ao carregar a biblioteca Maps:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps");
```

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 é definido, é necessário definir as opções dos recursos necessários.

Para ativar a inclinação, defina a opção de mapa tiltInteractionEnabled como true ou chame map.setTiltInteractionEnabled(true).
Para ativar o movimento panorâmico, 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 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 do mapa seguindo as etapas em Usar a estilização de mapas baseada na nuvem: obter um ID do 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 criado. 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 do mapa, como 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()}`);
  });```