Aula que aborda as ferramentas Google para visualização e construção de mapas, usando Google Maps API, na versão V3 (atual).

1. UNID 2 - Banco de dados distribuídos e geográficosUNID 2 - Banco de dados distribuídos e geográficos
IFPA
Curso de Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)
Tópicos Especiais em Sistemas de Informação
Google Maps API
e Possíveis Aplicações
Prof. Cláudio Martins
claudiomartins2000@gmail.com

2. 2
 Objetivo
 A Google Maps API
Família da Google Maps API
Empresas usando e como estão usando
Nova Google Maps API V3 (Javascript)
 Possíveis Aplicações
 Case da Google Maps API
 Conclusão

3. 3
Objetivo
Fornecer uma visão geral
da Família Google Maps
API, e alguns detalhes da
Google Maps API V3
(Javascript)

4. 4
Google Maps API JavaScript
API JavaScript do Google Maps
Incorporar um mapa interativo do
Google em sua página da Web
usando JavaScript.
A Versão 3 desta API foi especialmente desenvolvida para ser mais
rápida e mais aplicável aos dispositivos móveis, bem como aos
aplicativos de navegadores desktop tradicionais.
A API oferece diversos utilitários para manipulação de mapas e para
a adição de conteúdo ao mapa por meio de diversos serviços.
A API JavaScript do Google Maps v3 é um serviço gratuito,
disponível para qualquer website que seja gratuito para os
consumidores.

5. 5
Mapas estáticos
Adicione mapas estáticos, incluindo mapas de
terreno e satélite, à sua página da Web ou a
seu aplicativo.
A API do Google Static Maps oferece
suporte a estilos personalizados, impressão e
exibição em alta resolução, marcadores e
geometria.
Leia a documentação do desenvolvedor.

6. 6

7. 7
API de imagem do Google Street View
 Permite incorporar imagens estáticas do
Google Street View a sua página da Web
ou a seu aplicativo.
Leia a documentação do desenvolvedor.

8. 8

9. 9
Família Google Maps API

10. 10
Como obter uma chave de API
Os aplicativos da API do Google Maps devem carregar a API
do Google Maps usando uma chave de API.
O uso de uma chave de API permite monitorar a utilização
da API do Google Maps por parte de seu aplicativo e garante
que o Google pode entrar em contato com você com relação
a seu aplicativo, se necessário.

11. 11
Para criar sua chave da API:
 Visite o Console de APIs em
https://code.google.com/apis/console e faça login em
sua Conta do Google.
 Clique no link Serviços, no menu esquerdo.
 Ative o serviço API do Google Maps v3.
 Clique no link Acesso à API no menu esquerdo. A
chave da API está disponível na página Acesso à API,
na seção Acesso simples à API. Os aplicativos da API
do Google Maps usam a chave para aplicativos de
navegador

12. 12

13. 13
Quem usa e como estão usando?
In just a few days, The New York Times developed
interactive maps for all the destinations in its travel section,
and today 50 percent of its travel section uses Google
Maps.
Using the My Maps feature, broadcast station KPBS
created a map providing real-time updates on the San
Diego wildfires that received over two million views within
a few days.

14. 14
Nova Google Maps API V3 (Javascript)
V3: a solução para
aplicativos do Google Maps
para computadores e
dispositivos móveis.
Desenvolvida com foco em
atender os dispositivos
móveis.

15. 15
Nova Google Maps API V3 (Javascript)
 Conjunto menor de recursos do
comparada à versão 2
 Estrutura MVC modificada
 Esta versão da API Javascript do Google
Maps não precisa mais de chaves de API
(em alguns tipos de mapas)
 Mapas estilizados
 Google Streetview suportado em HTML

16. 16
Nova Google Maps API V3
(Javascript)
 Eventos
 Eventos de interface de usuário
 Alterações de estado MVC
 Controles
 Navegação, MapType, Escala
 Superposições
 Marcadores, Polilinhas, Janela de Informações, Polígonos,
Mapas Estilizados
 Serviços
 Geocodificação, Rotas, Streetview

17. 17
Possíveis aplicações
Chamada básica da API

18. 18
Código fonte
ver explicações em: https://developers.google.com/maps/documentation/javascript/tutorial?hl=pt-br
Chamada básica da API

19. 19
Possíveis aplicações

20. 20
Código fonte

21. 21
Possíveis aplicações
Folha de SP – Usando Google Maps API Flash (3D)

22. 22
Possíveis aplicações
Mostrar densidade populacional

23. 23
Possíveis aplicações
Rastrear de rota com indicador de direção

24. 24
“Solução Google”
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
var myLatlng = new google.maps.LatLng(-23.533611,-46.633333);
var myOptions = {
zoom: 11,
disableDefaultUI: true,
navigationControl: true,
scaleControl: true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
};
google.maps.LatLng.prototype.latRadians = function() {
return this.lat() * Math.PI/180;
}
google.maps.LatLng.prototype.lngRadians = function() {
return this.lng() * Math.PI/180;
}
map = new google.maps.Map(document.getElementById("mapa"), myOptions);
}

25. 25
Referências
 http://code.google.com/intl/pt-BR/apis/maps/
 http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/examp
les/index.html
 http://maps.google.com/help/maps/casestudies/video.html#nytimes
 http://maps.google.com/help/maps/casestudies/video.html#kpbs
 http://www1.folha.uol.com.br/cotidiano/860350-chuva-danifica-imoveis-e-pont
os-turisticos-na-regiao-serrana-do-rj-veja-antes-e-depois.shtml
 http://econym.org.uk/gmap

26. UNID 2 - Banco de dados distribuídos e geográficosUNID 2 - Banco de dados distribuídos e geográficos
IFPA
Curso de Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)
Tópicos Especiais em Sistemas de Informação
Google Maps API
- Exercícios práticos
Prof. Cláudio Martins
claudiomartins2000@gmail.com

27. 27
Documentação oficial
 Para realizar essa atividade prática, abra
a documentação oficial do Google Maps:
 https://developers.google.com/maps/documentation/javascript/tutorial?hl
=pt-br
 Em seguida utilize o código para realizar
as seguintes tarefas:

28. 28
Prática com Google Maps
 Modifique o código exemplo, alterando a
chamada da API do Google Maps,
retirando a chave (api key), e false no
sensor para que fique assim:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
 Exiba o mapa centrado em Belém (Lat:-1.45600,
Lng: -48.50400)
 Aplique o zoom acima de 6 (teste até 20).
 Modifique o tipo de mapa de ROADMAP para
outros formatos (SATELLITE, HYBRID e TERRAIN)

29. 29
Prática com Google Maps
 Copie o código e crie uma nova página web. Altere
o código para:
 Carregar o mapa no modo assíncrono da API.
 Exibir o mapa em um bloco (div) com 70% da
página.
 Utilize programação dinâmica em JSP ou JSF, para
apresentar um formulário com opções de cidades.
Quando o usuário escolher uma cidade, é exibido o
mapa da cidade em um zoom próximo de 12.
 Utilize as seguintes cidades e coordenadas (lat,
long):

30. 30
Práticas Google Maps Tabela de cidades e coordenadas (centroides):
Cidade latitude longitude Cidade latitude longitude
ABAETETUBA -1.71800 -48.88300 CAPANEMA -1.19600 -47.18100
ALTAMIRA -3.20300 -52.20600 IGARAPÉ-MIRI -1.97500 -48.96000
ANANINDEUA -1.36600 -48.37200 MARABÁ -5.36900 -49.11800
BARCARENA -1.50600 -48.62600 MOJU -1.88400 -48.76900
BELÉM -1.45600 -48.50400 OURÉM -1.54800 -47.11900
BENEVIDES -1.36100 -48.24500 PARAGOMINAS -2.99500 -47.35300
BRAGANÇA -1.06300 -46.77300 PARAUAPEBAS -6.06800 -49.90200
CAMETÁ -2.24400 -49.49600 REDENÇÃO -8.02900 -50.03100