terça-feira, 12 de maio de 2015

Utilizando Google Maps no Android

Este é um tutorial de enorme importância. Todo desenvolvedor Android que um dia já se deparou com a necessidade de colocar um mapa da Google na tela do aplicativo sabe o quanto é trabalhoso fazê-lo. Não que seja difícil. Mas é inegável que é bastante burocrático.

O esforço decorre da exigência da Google em atrelar a identificação do ambiente de desenvolvimento, à identidade do aplicativo que usará o mapa e, por último, à identificação do usuário da Google Maps API.

Pra economizar o tempo e a sanidade do leitor, decidi tornar público o caminho das pedras em se tratando do uso de mapas no Android. Seguindo diligentemente as instruções fornecidas aqui será possível dispor de um mapa na tela do aplicativo de maneira trivial.

Utilizaremos a biblioteca "Google Play Services for Froyo". A escolha decorre do fato de que, com ela, nosso aplicativo será compatível com praticamente todos os dispositivos Android. Até mesmo aquele celular abandonado no fundo da gaveta vai mostrar o mapa corretamente.

Em nosso "Ambiente de Desenvolvimento Android", prevendo que teríamos em algum momento um tutorial sobre mapas, já dispomos da referida biblioteca, prontinha para uso.

Então vamos ao trabalho. Primeiro vamos criar um novo projeto no Eclipse chamado "projetoMapa".

O próximo passo será justamente, acrescentar a biblioteca "Google Play Services for Froyo". Para isto, clique com o botão direito sobre o nome do projeto e selecione "properties", opção "Android". Então clique no botão "Add". Selecione "google-play-services_lib" e pressione OK:





Com isto estamos preparados para começar a utilizar as funcionalidades de mapa em nosso aplicativo.

O segundo passo é definirmos o local onde o mapa vai aparecer, isto é, em que tela e qual o espaço utilizado por ele. Isto é feito inserindo-se um "fragment". Portanto, vamos agora abrir o arquivo "activity_main.xml", da pasta "res/layout", que corresponde ao design da nossa tela principal (MainActivity). Copie e cole o código abaixo: 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <fragment
        android:id="@+id/map"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="50dp"
        class="com.google.android.gms.maps.SupportMapFragment" />

</RelativeLayout>


O terceiro passo é definir as permissões no arquivo "AndroidManifest.xml". Vamos abrir o arquivo e inserir as seguintes linhas, logo apos o elemento "<uses-sdk>":

<permission
    android:name="com.example.projetomapa.permission.MAPS_RECEIVE" android:protectionLevel="signature" />

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true" />


Para o quarto passo, precisaremos obter alguns itens:

* O identificador do ambiente de desenvolvimento.
* A identidade do aplicativo que usará o mapa.
* A chave da Google Maps API.

Para obter o primeiro item, precisamos, no Eclipse, abrir o menu "Window->Preferences->Android->Build". E então copiar o texto disposto no campo "SHA1 fingerprint":




Como estamos aqui usando o mesmo ambiente de desenvolvimento, o número será idêntico. O ideal é que seja outro, caso contrário estaremos compartilhando o mesmo ID de ambiente. É possível gerar outro número, mas isto foge do escopo deste tutorial.

O segundo item, a identidade do aplicativo, é o nome que aparece no início do arquivo "AndroidManifest.xml" no campo "package", ou seja: "com.example.projetomapa". É o nome do projeto.

O terceiro item, a chave de permissão de uso da Google Maps API, nós precisamos obter online. Desta maneira:

1) Acessar o site https://console.developers.google.com e fazer login.
2) Criar um novo projeto:



3) Definir o nome do projeto, clicar em CRIAR e aguardar o resultado:






4) Clicar no menu "APIs e autenticação", depois em "Credenciais" e depois no botão "Criar nova chave", opção "Chave do Android":





5) Aqui o mais importante: É nesta janela onde faremos a associação das informações. Cole aqui o "SHA1 fingerprint" que identifica o ambiente de desenvolvimento (no caso do exemplo "02:4A:D9:2D:D2:85:E5:F1:94:95:36:EC:66:02:99:E5:71:BA:C2:7C"). Depois digite um sinal de ponto e vírgula (";") que será o separador. Em seguida digite a identidade do aplicativo: "com.example.projetomapa". Então clique no botão "criar":





6) O resultado da operação é a liberação de uma chave que poderemos utilizar em nossos aplicativos que disponham de mapa, para que o mapa tenha a autorização de ser mostrado. No caso a Google Maps API key "AIzaSyB_i5ss8XwMWOXTDVj50A8jgdecWhH29X0"
Recomendamos utilizar a sua própria chave, pois esta do exemplo poderá ser cancelada, fazendo com que seu aplicativo eventualmente pare de mostrar o mapa:






7) O último passo é ativar a API. Para isto, devemos selecionar a opção do menu lateral "APIs", depois clicar em "Google Maps Android API". Em seguida, clicar no botão "Ativar API", conforme mostram as imagens:







Concluímos, portanto, o quarto passo e o resultado desta etapa foi a ativação do uso da Google Maps API e a obtenção da chave de mapa.

Vamos agora definir dentro de nosso aplicativo, a chave de mapa, para que ele tenha autorização de mostrá-lo.

Vamos abrir o arquivo "AndroidManifest.xml" e colar o trecho abaixo dentro do elemento <application>, substituindo a chave pela chave obtida no item 6 acima, assim:


 <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="[suaChaveDoGoogleMapsAPI]" />


Substitua o trecho em azul pela sua própria chave, obtida no passo 4 (item 6).


Quinto passo

Abrir o arquivo "MainActivity.java", disponível na pasta "src" e substituir o "extends Activity" por "extends FragmentActivity", como se segue:


public class MainActivity extends FragmentActivity
{


Pra facilitar ainda mais, segue a lista dos imports necessários para que tudo seja reconhecido corretamente:


import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.GooglePlayServicesUtil;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;


O passo final é inserir o código abaixo no método "onCreate" do "MainActivity.java", logo após a instrução "setContentView":


// Verifica se o aparelho possui o Google Play Services (requisito necessário para o
// funcionamento do mapa) e mostra aviso caso não possua.
int resultCode=GooglePlayServicesUtil.isGooglePlayServicesAvailable(getApplicationContext());

if (resultCode == ConnectionResult.SUCCESS)
{

   // Inicializa o mapa, para utilização
   FragmentManager fmanager=getSupportFragmentManager();
   Fragment fragment=fmanager.findFragmentById(R.id.map);
   SupportMapFragment supportmapfragment=(SupportMapFragment) fragment;
   final GoogleMap supportMap=supportmapfragment.getMap();

   // Configura o mapa como sendo do tipo padrão
   supportMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);

   // Exibe marcador da posição atual do usuário (bolinha azul do Google Maps).
   supportMap.setMyLocationEnabled(true);

   // Cria um ponto (Latitude, Longitude) que será o centro do mapa.
   LatLng latlng=new LatLng(-22.910509, -43.203932);

   // Desenha o mapa, definindo como centro a posição criada acima. 
   CameraPosition cameraPosition=new CameraPosition.Builder().target(latlng).zoom(15).build();
   supportMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

}
else
{
   try
   {
      int RQS_GooglePlayServices=1;
      
      GooglePlayServicesUtil.getErrorDialog(resultCode, this, RQS_GooglePlayServices);
   }
   catch (Exception erro)
   {
      finish();
   }
}

O que o código acima está fazendo é, primeiro verificando se o "Google Play Services" está presente no dispositivo, pois é pré-requisito para o mapa funcionar. Caso não esteja instalado no aparelho, uma mensagem de alerta é mostrada.

Caso a condição tenha sido atendida, então o mapa é inicializado e é criado um ponto LatLng que será o centro do mapa. Também estamos dizendo para o mapa mostrar o "ponto azul" com a localização automática do usuário. As últimas instruções efetivamente realizam o trabalho final, apresentando na tela o resultado:







Podemos considerar este artigo uma espécie de cartilha no que diz respeito ao uso de mapas da Google em aplicativos Android. A intenção foi tornar o processo mais fácil para quem está começando, de forma a eliminar as frustrações que são frequentes quando o desenvolvedor começa a se aventurar por este mundo desavisadamente.

Para aqueles que quiserem baixar o projeto completo,ei-lo aqui. Para quem preferir o APK para ver o resultado direto no celular, baixe-o aqui.

Uma vez que o mapa tiver sido mostrado corretamente, daí pra frente é só evolução.

Em tutoriais futuros, mostraremos como colocar marcadores no mapa e executar animações de câmera, para pontos específicos ou ainda para mostrar um determinado conjunto de marcadores.

Até lá!

Nenhum comentário:

Postar um comentário