Estilização de mapas baseada na nuvem

Selecione a plataforma: Android iOS JavaScript Web Service

A Plataforma Google Maps oferece recursos de Estilização de mapas baseada na nuvem que facilitam a personalização e o gerenciamento de mapas usando o console do Google Cloud. Assim, é possível criar uma experiência personalizada para os usuários sem ter que atualizar o código dos seus apps sempre que você fizer mudanças 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 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, e não é preciso entender 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.

Confira os recursos:

Estilização de mapas baseada na nuvem: gerencie e estilize seus mapas dinâmicos ou estáticos no console do Cloud usando IDs e estilos em vez de personalizar seu mapa no código usando JSON.
Mapa vetorial: desenvolvedores de JavaScript podem 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 de pontos de interesse da exibição do mapa.
Controle de densidade de PDIs: ajuste a densidade dos pontos de interesse que aparecem no mapa básico para mostrar mais ou menos PDIs por padrão.

Embora a Estilização de mapas baseada na nuvem esteja disponível no SDK do Maps para Android¹, no SDK do Maps para iOS, em JavaScript e na API Maps Static, nem todos os recursos ficarão visíveis em todas as plataformas.

Antes de começar

Criar um ID de mapa
Para usar a Estilização de mapas baseada na nuvem, seu mapa precisa ser carregado usando um ID.
Migrar do estilo codificado
Antes de adicionar um ID de mapa para usar a Estilização de mapas baseada na nuvem em um mapa personalizado com estilo codificado, como parâmetros de consulta JSON ou de URL, remova esse estilo para evitar conflitos com futuros recursos. Você pode importar o estilo JSON para um novo estilo de mapa.
- No Android, atualize o MapStyleOptions.
- No iOS, atualize a classe GMSMapStyle.
- Em JavaScript, remova o estilo MapTypeStyle.
- No Maps Static, remova o parâmetro style.

Faturamento

Usar a Estilização de mapas baseada na nuvem requer um ID de mapa. Em JavaScript e nos SDKs do Maps para Android e iOS, o uso de um ID de mapa gera uma cobrança na SKU do Dynamic Maps. Na API Maps Static, esse uso cria cobranças na SKU do Static Maps.

Exemplos

Neste exemplo básico de carregamento de um mapa estilizado usando um ID do mapa, o Maps JavaScript faz referência ao ID 8e0a97af9386fef no carregamento e aplica de forma automática o estilo atualmente associado 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;index.ts

JavaScript

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

window.initMap = initMap;index.js

Exemplo

Testar amostra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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