Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ative a Google Maps Android API

Para começar, orientaremos você pelo Google Developers Console para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ative a Google Maps Android API
  3. Criar chaves apropriadas
Continuar

Adicionar um mapa estilizado

Este tutorial mostra como adicionar um mapa com estilização personalizada a um aplicativo Android. O tutorial usa o modo noturno como exemplo de estilização personalizada.

Com opções de estilo, você pode personalizar a apresentação de estilos de mapas Google padrão, alterando o visual de recursos como vias, estacionamentos, estabelecimentos e outros pontos de interesse. Isso significa que você pode enfatizar componentes específicos do mapa ou fazer o mapa complementar o estilo da página do seu aplicativo.

A estilização só funciona no tipo de mapa normal.

Obter o código

Clone ou baixe o repositório Google Maps Android API v2 Samples do GitHub.

Configurar um projeto de desenvolvimento

Siga estas etapas para criar o projeto de tutorial no Android Studio.

  1. Baixe e instale o Android Studio.
  2. Adicione o pacote do Google Play Services ao Android Studio.
  3. Clone ou baixe o repositório Google Maps Android API v2 Samples caso ainda não tenha feito isso quando começou a ler este tutorial.
  4. Importe o projeto de tutorial:

    • No Android Studio, selecione File > New > Import Project.
    • Acesse o local em que você salvou o repositório Google Maps Android API v2 Samples depois de baixá-lo.
    • Encontre o projeto StyledMap no seguinte local:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Selecione o diretório do projeto e clique em OK. O Android Studio compilará o projeto usando a ferramenta de compilação Gradle.

Obter uma chave de API e ativar as APIs necessárias

Para terminar este tutorial, você precisa de uma chave de API Google que tenha autorização para usar a Google Maps Android API.

Clique no botão abaixo para obter uma chave e ativar a API.

Obter uma chave

Para saber mais, leia o guia completo sobre como obter uma chave de API.

Adicionar a chave de API ao aplicativo

  1. Edite o arquivo gradle.properties do projeto.
  2. Cole a chave de API no valor da propriedade GOOGLE_MAPS_API_KEY. Ao compilar o aplicativo, o Gradle copia a chave de API para o manifesto Android do aplicativo.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Compilar e executar o aplicativo

  1. Conecte um dispositivo Android a um computador. Siga as instruções para ativar as opções do desenvolvedor no dispositivo Android e configure o sistema para detectá-lo. (uma alternativa é usar o Android Virtual Device (AVD) Manager para configurar um dispositivo virtual. Quando for escolher um emulador, não deixe de selecionar uma imagem que contenha as Google APIs. Para obter mais detalhes, consulte o guia de primeiros passos.)
  2. No Android Studio, clique na opção de menu Run (ou no ícone de botão de reprodução). Escolha um dispositivo quando solicitado.

O Android Studio invoca o Gradle para compilar o aplicativo e, em seguida, executa o aplicativo no dispositivo ou no emulador. Um mapa com estilização escura (modo noturno), semelhante à imagem desta página, deverá ser exibido.

Solução de problemas:

Compreender o código

Esta parte do tutorial explica as partes mais importantes do aplicativo StyledMap para ajudar você a entender como criar um aplicativo parecido.

Adicionar um recurso que contém um objeto de estilo do JSON

Adicione um recurso ao projeto de desenvolvimento, contendo as declarações de estilo no formato JSON. Use um recurso bruto ou uma string, como mostrado nos exemplos a seguir.

Observação: o aplicativo de amostra baixado do GitHub usa um recurso bruto.

Recurso bruto

Defina um recurso bruto no /res/raw/style_json.json, contendo a declaração de estilo do JSON para estilização de modo noturno:

Recurso de string

Defina um recurso de string no /res/values/style_strings.xml, contendo a declaração de estilo do JSON para estilização de modo noturno. Este tutorial usa o nome de string style_json. Neste arquivo, é necessário usar uma barra invertida para escape dos pontos de interrogação:

Passar um objeto de estilo do JSON para o mapa

Para aplicar estilo ao mapa, chame GoogleMap.setMapStyle() passando um objeto MapStyleOptions que contém as declarações de estilo no formato JSON.

Recurso bruto

O exemplo de código a seguir supõe que o projeto contém um recurso bruto chamado style_json:

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

O layout (activity_maps_raw.xml) se parece com:

Recurso de string

O exemplo de código a seguir pressupõe que o projeto contém um recurso de string chamado style_json:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

O layout (activity_maps_string.xml) se parece com:

Mais informações sobre as declarações de estilo do JSON

Os mapas estilizados usam dois conceitos para aplicar cores e outras alterações de estilo a um mapa:

  • Os seletores especificam os componentes geográficos que podem ser estilizados no mapa. Por exemplo, vias, parques, extensões de água e outros, bem como seus rótulos. Os seletores incluem recursos e elementos, especificados como as propriedades featureType e elementType.
  • Os estilizadores são propriedades de cor e visibilidade que podem ser aplicados a elementos do mapa. Definem a cor exibida por meio de uma combinação de valores de matiz, cor e brilho/gama.

Consulte a referência de estilo para ver uma descrição detalhada das opções de estilo do JSON.

Google Maps APIs Styling Wizard

Use o Google Maps APIs Styling Wizard como forma rápida de gerar um objeto de estilo do JSON. A Google Maps Android API permite as mesmas declarações de estilo que a Google Maps JavaScript API.

Próxima etapa

Veja como ocultar recursos no mapa com estilização.

Enviar comentários sobre…

Google Maps Android API
Google Maps Android API
Precisa de ajuda? Acesse nossa página de suporte.