Exemplos legados

Android

Executar o app de exemplo ApiDemos

Para executar o app de exemplo ApiDemos, confira o exemplo do GitHub (Java | Kotlin) e a demonstração de CloudBasedMapStylingDemoActivity(Java | Kotlin). Observação: os links estão em inglês.

Os aplicativos de exemplo Java e Kotlin (em inglês) mostram como estilizar seu mapa 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 saber 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 o exemplo do GitHub app de exemplo Google Maps e veja o projeto CloudBasedMapStylingViewController (exemplo do GitHub para Swift | Objective-C).

Demonstração opcional do Cloud estilização do CocoaPod ou do GitHub

Em vez de começar do zero, você pode testar nosso aplicativo de exemplo Objective-C que demonstra como estilizar seu mapa do iOS na nuvem. Para mais detalhes, consulte a amostra do Objective-C.

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 produz um erro, solicitando que você insira sua chave de API no arquivo SDKDemoAPIKey.h.

Se você ainda não tem uma chave de API, configure um projeto no Console do Cloud e siga as instruções em Gerar uma chave de API para gerar uma chave. Ao configurar a chave no Console do Cloud, você pode especificar o identificador do pacote do app para garantir que somente seu app possa usá-la. O identificador do pacote padrão do app de amostra 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 o desbloqueio do arquivo SDKDemoAPIKey.h para edição, escolha Unlock.

Remova a seguinte linha:

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

Compile e execute o projeto.

Demonstração do mapa de estilização na nuvem

A demonstração de CloudStyling mostra como estilizar o mapa usando um conjunto de estilos no console do Google Cloud.

Quando o app de demonstração for iniciado, clique em "Personalização de mapas" na seção "Amostras Beta", na parte de cima da lista.

Clique em Estilizar mapa para ver o efeito do carregamento de diferentes IDs de mapas.

Você também pode adicionar seu próprio estilo ("Mapa de estilo" > "Adicionar um novo ID do mapa") e conferir a atualização do mapa com seu mapa estilizado 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 implementa de forma automática o estilo 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

JSFiddle.net (link em inglês) Google Cloud Shell

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 a Estilização de mapas baseada na nuvem com um mapa personalizado personalizado com o parâmetro style, remova-os para evitar conflitos com recursos futuros.

  2. Para adicionar um ID a um mapa novo ou existente que usa uma das nossas APIs da Web, anexe o parâmetro de URL map_id e defina-o como o ID. Neste exemplo, mostramos como adicionar um ID 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" />