Estilização de mapas baseada na nuvem

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Selecione a plataforma: Android iOS JavaScript Serviço da Web

A Plataforma Google Maps oferece recursos de estilização de mapas baseada na nuvem que facilitam a estilização, a personalização e o gerenciamento de mapas usando o console do Google Cloud. Assim, é possível criar uma experiência personalizada para seus usuários sem precisar atualizar o código dos seus apps sempre que fizer uma mudança de estilo.

Os estilos criados antes de 15 de setembro de 2020 não exibirão os recursos naturais avançados do Google Maps. Para usar esses recursos, você precisa criar um estilo de mapa.

Com a estilização de mapas baseada na nuvem, você pode criar e editar estilos de mapa para qualquer um dos seus apps que usam o Google Maps sem precisar fazer mudanças no código quando o ID do mapa estiver em vigor. Todas as mudanças de estilo podem ser feitas no Console do Cloud, sem a necessidade de habilidades de programação. Mude a aparência e a cor de vários elementos do mapa, como vias, edifícios, corpos hídricos, pontos de interesse e trajetos de transporte público.

Entre eles:

  • Estilização de mapas baseada na nuvem: em vez de personalizar seu mapa em código usando JSON, gerencie e estilize seus mapas dinâmicos ou estáticos no Console do Cloud usando IDs e estilos de mapa.
  • Mapa vetorial: os desenvolvedores JavaScript podem optar por usar o mesmo mapa baseado em vetor acelerado por WebGL, disponível no maps.google.com.br diretamente nos próprios apps da Web.
  • Filtragem de PDIs de empresas: é possível remover cinco categorias desses PDIs da exibição do mapa.
  • Controle de densidade de PDIs: a densidade dos pontos de interesse mostrada no mapa básico pode ser ajustada para mostrar mais ou menos lugares por padrão.

Embora a estilização de mapas baseada na nuvem esteja disponível em SDK do Maps para Android1, SDK do Maps para iOS, JavaScript eAPI Maps Static, nem todos os recursos ficarão visíveis em todas as plataformas.

Antes de começar

Faturamento

Usar a estilização de mapas baseada na nuvem requer um ID de mapa. No SDK do Maps para Android, SDK do Maps para iOS e JavaScript, o uso de um ID do mapa gera uma cobrança na SKU do Dynamic Maps. Na API Maps Static, o uso de um ID de mapa gera uma cobrança na SKU do Static Maps.

Exemplos

Esse é um exemplo básico de carregamento de um mapa com estilo personalizado usando um ID do mapa. Nesse caso, o Maps JavaScript referencia o ID do mapa 8e0a97af9386fef quando o mapa é carregado e aplica automaticamente o estilo associado atualmente a esse ID.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
Ver exemplo

Testar amostra


  1. A estilização de mapas baseada na nuvem não está disponível no Modo Lite do Android