Aula09 UsandoGoogleMaps

Prévia do material em texto

Aula 09 – Usando o Google API –
Google Maps
Prof. Dr. Jucimar Souza
jucibs@gmail.com
Serviços da Google
 O Google disponibiliza diversos serviços 
relacionados aos seus produtos que podem 
ser utilizados gratuitamente por nos, 
desenvolvedores. 
 Esses serviços também são conhecidos 
como Google APIs. 
 Places API
 Tasks API
 Google Maps API
 Drive API para integracao com o Google Drive.
Serviços da Google
 Geralmente são acessados via HTTP
 Aplicativo cliente deve realizar a autenticação
 Executar as requisições
 Processar a resposta do serviço
 Google APIs Clients Libraries
 São bibliotecas disponibilizadas em diversas 
linguagens
 Nesta aula vamos usar a Google Maps Android
API v2
Preparando o Ambiente para usar a API 
Google Maps
 Acesse o SDK Manager 
 Acesse Extras 
 Instale Google Play Services
Preparando o Ambiente para usar a API 
Google Maps
 Acesse o SDK Manager 
 Acesse Extras 
 Instale Google Play Services
Preparando o Ambiente - Importar 
Google Play Services como biblioteca
 No Eclipse
 File / Import / Android / Existing Android
Code Into Workspace
 Selecionar o diretório da biblioteca do Google 
Play Services do SDK
 .\adt-bundle-windows-x86_64-
20140702\sdk\extras\google\google_play_services
 Não esqueça de marcar a opção Copy Project into
Workspace
Preparando o Ambiente - Importar 
Google Play Services como biblioteca
Preparando o Ambiente - Importar 
Google Play Services como biblioteca
 Vamos criar o nosso projeto 
ExemploGoogleMaps
 Após criar o projeto você deve: 
 Importar o projeto googleplay-service-lib como 
biblioteca para o projeto recém criado
 Isso deve ser feito através da opção de 
propriedade do projeto 
Preparando o Ambiente - Importar 
Google Play Services como biblioteca
Gerando a API Key de Mapas
 É uma forma curta de certificado digital que 
é utilizado para assinar o aplicativo Android.
 Conhecido como sha-1 fingerprint e é informado 
no Google API Console, juntamente com o 
package name da aplicação
 O Android SDK já traz um keystore em sua 
aplicação
 Chave é utilizada como debug e acionada sempre 
que plugamos um smartphone no PC e testamos 
nele
 Sem percebermos o projeto é compactado em um apk
e assinado digitalmente antes de carregar no device
Gerando a API Key de Mapas
 Obtendo o SHA1 fingerprint do sdk
 Acesse Window > Preference > Android > Build
 Copie o campo SHA1 – fingerprint
 Outra formar é usando o Keytool
 Linux e MacOS
 keytool -list -v -keystore ~/.android/debug.keystore-alias 
androiddebugkey -storepass android –keypass android
 Windows
 keytool -list -v -keystore "%USERPROFILE 
%\.android\debug.keystore" -alias androiddebugkey -
storepass android -keypass android
 Mais detalhes em:
 https://developers.google.com/maps/documentation/
Gerando a API Key de Mapas
Requisitando o serviço da Google 
Console API
 Acesse 
https://code.google.com/apis/console/
 Faça o login e acesse o botão para abilitar
API 
Requisitando o serviço da Google 
Console API
 Procure a API de nome:
 Google Maps Android API v2
 Altere o status para ON dando um clique duplo 
no botão
 Confirme que você aceita os termos de uso
 Agora vamos nos credenciar para acessar a 
API
 Clique em Creditials e depois no botão Create
new key
Requisitando o serviço da Google 
Console API
Requisitando o serviço da Google 
Console API
 Selecione Android Key
Requisitando o serviço da Google 
Console API
 Copie o SHA 1 para esta janela, digite um ; e na 
sequencia o pacote principal do projeto
Requisitando o serviço da Google 
Console API
 A chave foi gerada. Copie para colarmos no 
AndroidManifest.xml
Projetos que usam o GoogleMaps devem 
configurar o AndroidManifest.XML
 Dentro da Tag Aplication
 Usado por todos os MapFragments da 
aplicação
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
Aqui você informa a 
chave obtida no site
Projetos que usam o GoogleMaps devem 
configurar o AndroidManifest.XML
 Inclua também a versão do GoogleMaps no 
manifesto dentro da tag Aplicaction
<application
.
.
.
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
Configurando as permitions e features no 
AndroidManifest.XML
<permission
android:name= "br.edu.ufam.permission.MAPS_RECEIVE"
android:protectionLevel="signature" />
<uses-permission
android:name="br.edu.ufam.permission.MAPS_RECEIVE" />
Avisa ao usuário e ao sistema operacional que este aplicativo 
vai receber mapas dos servidores da Google
<uses-permission
android:name="android.permission.INTERNET" />
Permissão para usar a Internet
Configurando as permitions e features no 
AndroidManifest.XML
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE"
/>
Permite que a aplicação acesse o estado da conectividade de 
rede do aparelho
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE
" />
Permissão a aplicação escrever em memoria externa
Configurando as permitions e features no 
AndroidManifest.XML
<uses-permission
android:name=
"com.google.android.providers.gsf.permission.READ_GSERVICES" />
Avisa ao usuário e ao sistema operacional que este aplicativo 
vai receber mapas dos servidores da Google
<uses-permission
android:name=
"com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission
android:name=
"com.google.android.providers.gsf.permission.READ_GSERVICES"/>
Configurando as permitions e features no 
AndroidManifest.XML
Informa aos futuros usuários que somente os devices com 
suporte à OpenGL conseguem instalar a aplicação 
Mais informações sobre permissões acesse:
http://developer.android.com/reference/android/Manifest.per
mission.html
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
Mostrando o mapa na aplicação
 Selecione um LinerLayout para sua 
aplicação e dentro dele coloque um 
fragmente conforme código abaixo:
Agora execute a aplicação.
<LinearLayout xmlns:and...
<fragment
android:id="@+id/fragment1"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp" />
</LinearLayout>
Aplicação rodando
 Aqui foi usado on
emulador 
Genymotion que 
roda no VirtualBox
 http://www.genymo
tion.com/
 Veja como instalar 
google app na 
Internet para poder 
instalar o 
GoogleMaps
Adicionando pontos de Interesse (POI)
 Vamos adicionar alguns pontos de 
interesse no mapa para deixa-lo com uma 
cara mais profissional. 
 Vamos colocar alguns pontos turístico e de 
interesse público de Manaus.
Adicionando pontos de Interesse (POI)
 Para adicionar um ponto de interesse 
precisamos de uma instância de 
GoogleMaps:
 Dentro da onCreate:
MapFragment mapFrag=
MapFragment)getFragmentManager().
findFragmentById(R.id.fragment1);
GoogleMap mMap=mapFrag.getMap();
Adicionando pontos de Interesse (POI)
 Para marcar um lugar no mapa precisamos 
de uma instancia da classe MarkerOption
passando a latitude, longitude e titulo.
 A latitude e longitude é fornecida através 
de uma instancia da classe 
 Para testar este recurso vamos adicionar no 
nosso mapa os pontos IFAM, UFAMe Teatro 
Amazonas
Adicionando o ponto UFAM
// latitude e longitude do IFAM
double latitude = -3.133995;
double longitude = - 60.012812;
// criar marcador
MarkerOptions marker = new 
MarkerOptions().position(
new LatLng(latitude,longitude)). 
title(“IFAM");
// adiciona o marcador no mapa
mMap.addMarker(marker);
Adicionando o ponto UFAM
// latitude e longitude da UFAM
double latitude = -3.090351;
double longitude = -59.963566;
// criar marcador
MarkerOptions marker = new 
MarkerOptions().position(
new LatLng(latitude,longitude)). 
title("UFAM");
// adiciona o marcador no mapa
mMap.addMarker(marker);
Adicionando o ponto Teatro Amazonas 
adicionando cores nos marcador
// latitude e longitude do Teatro Amazonas
latitude = -3.130058;
longitude = -60.023403;
// criar marcador
marker = new MarkerOptions().position(
new LatLng(latitude, longitude));
// Adicionando Titulo
marker.title("Teatro Amazonas");
marker.icon(BitmapDescriptorFactory.
defaultMarker(BitmapDescriptorFactory.HUE_ROSE));
// adicionar marcador
mMap.addMarker(marker);
Cores dos Marcadores
Você também pode usar um um ícone 
como marcador
// latitude e longitude do Teatro Amazonas
latitude = -3.130058;
longitude = -60.023403;
// criar marcador
marker = new MarkerOptions().position(
new LatLng(latitude, longitude));
// Adicionando Titulo
marker.title("Teatro Amazonas");
marker.icon(
BitmapDescriptorFactory.fromResource(
R.drawable.emo_im_laughing));
// adicionar marcador
mMap.addMarker(marker);
Centralizando o mapa
 Existe um recurso no mapa que ele 
movimenta o mapa para posição desejada 
dando a seção de uma câmera.
 O método moveCamera de GoogleMap
recebe como parâmetro uma instancia de 
CameraUpdate
 A classe CameraUpdateFactory recebe uma 
série de métodos estáticos que retornam 
CameraUpdate
Centralizando o mapa
 O método recebe o parâmetro da classe LatLng e 
o outro é o zoom, que varia entre 2.0 e 21.0. 
Sendo:
 2.0 o nível máximo de zoom out
 21.0 o nível máximo de zoom in
mMap.moveCamera(
CameraUpdateFactory.newLatLngZoom(
new LatLng(latitude,longitude),10));
Centralizando o mapa com animação da 
câmera
 Vamos substituir o código do slide anterior por 
este:
CameraPosition cameraPos=new 
CameraPosition.Builder()
.target(new LatLng(latitude, longitude))
.zoom(17)
.bearing(90)
.tilt(60)
.build();
mMap.animateCamera(CameraUpdateFactory
.newCameraPosition(cameraPos));
Centralizando o mapa com animação da 
câmera
 Vamos substituir o código do slide anterior por 
este:
CameraPosition cameraPos=new 
CameraPosition.Builder()
.target(new LatLng(latitude, longitude))
.zoom(17)
.bearing(90)
.tilt(60)
.build();
mMap.animateCamera(CameraUpdateFactory
.newCameraPosition(cameraPos));
Alvo e 
zoom
Centralizando o mapa com animação da 
câmera
 Vamos substituir o código do slide anterior por 
este:
CameraPosition cameraPos=new 
CameraPosition.Builder()
.target(new LatLng(latitude, longitude))
.zoom(17)
.bearing(90)
.tilt(60)
.build();
mMap.animateCamera(CameraUpdateFactory
.newCameraPosition(cameraPos));
Alvo e 
zoom
Define a posição da bússola
Centralizando o mapa com animação da 
câmera
 Vamos substituir o código do slide anterior por 
este:
CameraPosition cameraPos=new 
CameraPosition.Builder()
.target(new LatLng(latitude, longitude))
.zoom(17)
.bearing(90)
.tilt(60)
.build();
mMap.animateCamera(CameraUpdateFactory
.newCameraPosition(cameraPos));
Alvo e 
zoom
Define o ângulo da exibição do 
mapa
Centralizando o mapa com animação da 
câmera
 Vamos substituir o código do slide anterior por 
este:
CameraPosition cameraPos=new 
CameraPosition.Builder()
.target(new LatLng(latitude, longitude))
.zoom(17)
.bearing(90)
.tilt(60)
.build();
mMap.animateCamera(CameraUpdateFactory
.newCameraPosition(cameraPos));
Alvo e 
zoom
Constrói uma instancia de 
CameraPosition
Alterando o tipo de Mapa
 Tire o comentário do código um de cada vez e rode a 
aplicação para ver a diferença
mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
mMap.setMapType(GoogleMap.MAP_TYPE_NONE);
As vezes você precisa marca uma área 
no mapa
 Polyline
 Conjunto de LatLng
 Cria uma série de segmentos de reta
 GoogleMap.addPolyline(opcoes)
 Exemplo:
PolylineOptions rectOptions = new PolylineOptions()
.add(new LatLng(-3.129892, -60.024078))
.add(new LatLng(-3.129914, -60.022812))
.add(new LatLng(-3.130846, -60.022833))
.add(new LatLng(-3.130782, -60.024131))
.add(new LatLng(-3.129892, -60.024078));
Polyline polyline = mMap.addPolyline(rectOptions);
Acessando seu local atual
 O código abaixo habilita o botão local atual
 mMap.setMyLocationEnabled(true);
 mMap.getUiSettings(). 
setMyLocationButtonEnabled(true);
 Para fazer uso deste recurso você deve 
permitir sua aplicação acessar localização 
fina
 <uses-permission android:name
="android.permission.ACCESS_FINE_LOCATION" />
Acessando os Botões de Zoom e função 
de Bussola
 Você pode desabilitar o botão de zoom 
utilizando este método:
mMap.getUiSettings().setZoomControlsEnabled(false);
 Funcionalidade de Bussola pode ser obtida 
usando:
mMap.getUiSettings().setCompassEnabled(true);
Dúvidas ??