Tutorial Android #19 – Integrando com o Google Maps

Olá pessoal! Como estão?

No tutorial de hoje, vamos aproveitar as coordenadas do GPS obtidas com o tutorial 17 e inseri-las em um mapa provido pelo Google Maps. Portanto, precisaremos que ele esteja instalado no emulador ou no seu celular para tal funcionalidade. Além disso, você também precisará de uma chave de desenvolvimento para que possa ocorrer a integração. Neste link, você obtém as informações necessárias sobre como conseguir esta chave.

Começando, vamos adicionar a opção para a visualização do mapa no FormularioDetalhes. Dessa forma, modifique o arquivo res/menu/opcao_detalhes.xml:

O ícone do menu (mapa.png) é o ícone ic_menu_mapmode.png, devidamente renomeado, que pode ser encontrado lá na pasta da sua instalação do Android SDK.

Em seguida, vamos modificar o método onPrepareOptionsMenu() no FormularioDetalhes para somente habilitar esta opção quando já houverem as informações básicas do restaurante (edição).

O próximo passo é criar uma Activity que será responsável por exibir o nosso mapa. Porém, antes disso, vamos informar ao arquivo AndroidManifest.xml que nossa aplicação fará uso da API do Google Maps. Dessa forma, dentro do nó application, adicione a seguinte linha:

Em seguida, vamos criar uma nova classe no pacote principal do projeto (net.rafaeltoledo.restaurante), com o nome de MapaRestaurante. Esta classe estenderá MapActivity. Inicialmente teremos o método onCreate(), onde simplesmente atribuiremos seu layout, e isRouteDisplayed(), método abstrato exigido. Neste segundo, por ora simplesmente retornaremos falso.

O próximo passo é modificar o método onOptionsItemSelected() para que  inicie a Activity MapaRestaurante.

O próximo passo é criarmos o XML que definirá o layout da Activity MapaRestaurante. Aqui vale a pena ressaltar dois pontos importantes:

  • Como o “layout” MapView não faz parte da biblioteca padrão de widgets do Android, é necessário especificar todo o seu caminho e;
  • Nesse ponto será necessária a chave para a API do Google Maps.

Prosseguindo, vamos criar um arquivo chamado mapa.xml que será salvo em res/layout:

Faça seu registro e substitua o valor pela sua própria chave (é gratuito!). Além disso, vale ressaltar que configuramos o atributo clickable como true para que o usuário possa movimentar o mapa, dar zoom, etc. Também devemos adicionar a nossa Activity no AndroidManifest.xml:

Para obter a latitude e longitude do FormularioDetalhes para o MapaRestaurantes, utilizaremos novamente os parâmetros extras possíveis de serem transferidos entre Acitivies através da classe Intent. Dessa forma, primeiramente vamos criar três atributos estáticos na classe MapaRestaurantes (nome do restaurante, latitude e longitude).

Porém, temos um pequeno problema. Atualmente em nossa aplicação, não estamos armazenando no formulário os valores de latitude e longitude do restaurante atual. Para resolver isso, vamos criar dois atributos do tipo double chamados latitude e longitude na classe FormularioDetalhes.

E então atribuir seus valores no método carregar().

Agora modificamos mais uma vez o método onOptionsItemSelected() para passar os valores para a Activity MapaRestaurantes, através dos atributos extras da classe Intent.

Na classe MapaRestaurantes, vamos obter os valores de latitude e longitude adicionando as duas linhas seguintes ao fim do método onCreate():

Precisamos agora de gerenciar a montagem do mapa, ajustando o zoom a um valor razoável, centralizando o marcador na tela e controlando o posicionamento das coordenadas, através de um GeoPoint. Para isso, vamos criar um membro na classe do tipo MapView chamado mapa.

E então, vamos adicionar mais algumas linhas ao fim do método onCreate() para criar o GeoPoint e adicionar as coordenadas a ele.

Vamos agora criar uma classe interna chamada SobreposicaoRestaurante que, como o próprio nome diz, será responsável por gerenciar a sobreposição do elemento no mapa.

Nela, gerenciamos para que aconteça a centralização do ponto, além de configurar o nosso ponto no mapa. Vamos agora adicionar mais algumas linhas ao final do método onCreate() para, aí sim, desenhar o ponto no mapa.

O arquivo do marcador (marcador.png) pode ser baixado juntamente com o projeto no fim do post.

Por fim, para finalizar, vamos gerenciar para que, quando o usuário toque na tela do mapa, ele exiba o nome do restaurante que foi marcado. Coisa simples, mas útil por questões de estética. Para fazer isso, implemente o método onTap() na classe interna SobreposicaoRestaurante.

Agora já podemos testar nossa aplicação.

Se o mapa não apareceu, provavelmente é porque você utilizou a minha chave de acesso ao Google Maps. 😛

A chave deve bater com a chave armazenada na sua máquina. Toda instalação da SDK do Android vem com uma chave que deve ser usada para gerar o MD5 requerido lá na página do Google Maps (link lá no começo do post, lembra?). Supondo que a pasta bin da sua JDK já esteja no Path do sistema, abra uma janela console a navegue até a pasta .android dentro da sua pasta pessoal (no meu caso, que estou usando o Ubuntu, /home/rafael/.android. No caso do Windows, seria C:UsersRafael.android). Dentro dessa pasta deve conter o arquivo debug.keystore. Digite então o seguinte comando no console:

Deve aparecer algo como androiddebugkey, Apr 3, 2012, PrivateKeyEntry,Certificate fingerprint (MD5): …, sendo que onde estão as reticências deve aparecer o que importa pra nós. Se caso estiver usando Java 7, adicione a opção -v ao comando. Ah, e eu vi bastante gente na Internet dizendo que não conseguiu executar o comando no Windows… talvez por algum bug?

Enfim, espero que tenham curtido mais esse tutorial. Como é de praxe, pra baixar o projeto, só clicar aqui.

Até logo!