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.

A Plataforma Google Maps oferece recursos de Estilização de mapas baseada na nuvem que facilitam estilizar, personalizar e gerenciar 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 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: 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 POIs 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

* Faça upgrade do SDK do Maps para Android
Para usar o estilo de mapas baseados na nuvem, é preciso usar a versão 18.0.0 ou posterior do SDK do Maps para Android e usar o renderizador mais recente do SDK do Maps para Android.

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

Android

Executar o app de exemplo ApiDemos

Para executar o app de exemplo ApiDemos, consulte a amostra do GitHub (Java | Kotlin) e veja a demonstração do CloudBasedMapStylingDemoActivity (Java | Kotlin).

Você pode encontrar um aplicativo de exemplo Java e Kotlin (links em inglês) que demonstra como definir o estilo do mapa do Android na nuvem.

Problemas conhecidos

Depois que seu app é entregue aos clientes, os estilos personalizados de mapas com IDs podem ser atualizados no Console do Google Cloud. Os novos estilos| são aplicados no app em algumas horas.

Para garantir a exibição imediata dos novos estilos personalizados para fins de teste, limpe os dados do app do dispositivo de teste. Para mais informações sobre como limpar dados do seu dispositivo, consulte Ajuda do Android > Liberar espaço.

As configurações variam de acordo com o smartphone. Para mais informações, entre em contato com o fabricante do dispositivo.

iOS

Executar o app de exemplo ApiDemos

Para executar o app de exemplo ApiDemos, consulte a amostra do GitHub App de exemplo GoogleMap e veja o projeto CloudBasedMapStylingViewController (exemplo do GitHub para Swift | Objective-C).

Demonstração opcional do Cloud CocoaPods ou do GitHub

Em vez de começar do zero, você pode testar nosso aplicativo de amostra Objective-C, que demonstra como definir o estilo do mapa do iOS na nuvem aqui.

Como criar o app de demonstração Beta

No Xcode, pressione o botão de compilação para compilar e executar o esquema atual. O build gera um erro, pedindo que você insira sua chave de API no arquivo SDKDemoAPIKey.h.

Se você ainda não tiver uma chave de API, siga estas instruções para configurar um projeto no Console do Cloud e receber uma chave de API. Ao configurar a chave no Console do Cloud, é possível especificar o identificador do pacote do app para garantir que somente seu app possa usá-la. O identificador de pacotes padrão do app de amostras do SDK é com.example.GoogleMapsDemos.

Edite o arquivo SDKDemoAPIKey.h e cole sua chave de API na definição da constante kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Se o Xcode solicitar que você desbloqueie o arquivo SDKDemoAPIKey.h para edição, escolha Desbloquear.

Remova a seguinte linha:

```
#error Register for API Key and insert here.
```

Compile e execute o projeto.

Demonstração de mapa de estilo baseado em nuvem

A demonstração do CloudStyling mostra como definir o estilo do mapa usando um estilo definido no Console do Google Cloud.

Quando o aplicativo de demonstração for iniciado, clique na demonstração de personalização de mapas na seção de amostras Beta na parte superior da lista.

Clique em Style Map para ver o efeito de carregar diferentes IDs de mapa.

Você também pode tentar adicionar seu próprio estilo ("Mapa de estilo" > "Adicionar um novo ID de mapa") e ver a atualização do mapa com seu mapa personalizado.

JavaScript

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;

JavaScript

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

window.initMap = initMap;
Exemplo

Testar amostra

API Maps Static

Um ID do mapa é um identificador associado a um recurso ou estilo de mapa específico. Configure um estilo de mapa e faça a associação dele a um ID no Console do Google Cloud. Depois, quando você faz referência um ID do mapa no código, o estilo associado é mostrado no seu app. Todas as atualizações de estilo que você fizer depois vão aparecer automaticamente no app, sem que os clientes precisem atualizar.

  1. Se você estiver usando o estilo de mapas baseados na nuvem com um mapa personalizado com o parâmetro style, remova-os para evitar conflitos em potencial com a funcionalidade futura.

  2. Para adicionar um ID de mapa a um mapa novo ou existente que use uma das nossas APIs da Web, anexe o parâmetro de URL map_id e defina-o como seu ID. Este exemplo mostra a adição de um ID de mapa a um mapa usando a API Maps Static.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
    


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