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 é carregado por padrão, e o carrega como uma grade de blocos de imagens rasterizadas com base em pixels, que são gerados pelo servidor da Plataforma Google Maps e depois veiculados para seu app da Web. O mapa vetorial é composto por blocos com base em vetores, que são desenhados no momento do carregamento do 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 fidelidade visual aprimorada e a capacidade de controlar a inclinação e a direção no mapa. Saiba mais sobre os recursos do mapa vetorial.

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 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 raster 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:

  1. Carregue a biblioteca RenderingType. Isso 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 é definido, é necessário definir as opções para os elementos 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 de deslocamento, 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. Para criar um novo ID do mapa, siga as etapas em Usar a estilização de mapas baseada na nuvem: extrair 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 opções no mapa. Com isso, você ajusta de forma programática esses valores e também permite que os usuários ajustem 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 os IDs dos mapas 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'
});