Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UNID 2 - Banco de dados distribuídos e geográficosUNID 2 - Banco de dados distribuídos e geográficos
IFPA
Curso de Tecnolo...
2
 Objetivo
 A Google Maps API
Família da Google Maps API
Empresas usando e como estão usando
Nova Google Maps API V3...
3
Objetivo
Fornecer uma visão geral
da Família Google Maps
API, e alguns detalhes da
Google Maps API V3
(Javascript)
4
Google Maps API JavaScript
API JavaScript do Google Maps
Incorporar um mapa interativo do
Google em sua página da Web
us...
5
Mapas estáticos
Adicione mapas estáticos, incluindo mapas de
terreno e satélite, à sua página da Web ou a
seu aplicativo...
6
7
API de imagem do Google Street View
 Permite incorporar imagens estáticas do
Google Street View a sua página da Web
ou ...
8
9
Família Google Maps API
10
Como obter uma chave de API
Os aplicativos da API do Google Maps devem carregar a API
do Google Maps usando uma chave d...
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 Con...
12
13
Quem usa e como estão usando?
In just a few days, The New York Times developed
interactive maps for all the destination...
14
Nova Google Maps API V3 (Javascript)
V3: a solução para
aplicativos do Google Maps
para computadores e
dispositivos móv...
15
Nova Google Maps API V3 (Javascript)
 Conjunto menor de recursos do
comparada à versão 2
 Estrutura MVC modificada
 ...
16
Nova Google Maps API V3
(Javascript)
 Eventos
 Eventos de interface de usuário
 Alterações de estado MVC
 Controles...
17
Possíveis aplicações
Chamada básica da API
18
Código fonte
ver explicações em: https://developers.google.com/maps/documentation/javascript/tutorial?hl=pt-br
Chamada ...
19
Possíveis aplicações
20
Código fonte
21
Possíveis aplicações
Folha de SP – Usando Google Maps API Flash (3D)
22
Possíveis aplicações
Mostrar densidade populacional
23
Possíveis aplicações
Rastrear de rota com indicador de direção
24
“Solução Google”
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow...
25
Referências
 http://code.google.com/intl/pt-BR/apis/maps/
 http://code.google.com/intl/pt-BR/apis/maps/documentation/...
UNID 2 - Banco de dados distribuídos e geográficosUNID 2 - Banco de dados distribuídos e geográficos
IFPA
Curso de Tecnolo...
27
Documentação oficial
 Para realizar essa atividade prática, abra
a documentação oficial do Google Maps:
 https://deve...
28
Prática com Google Maps
 Modifique o código exemplo, alterando a
chamada da API do Google Maps,
retirando a chave (api...
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 as...
30
Práticas Google Maps Tabela de cidades e coordenadas (centroides):
Cidade latitude longitude Cidade latitude longitude...
Upcoming SlideShare
Loading in …5
×

Aula Google Maps API JavaScript V3

1,426 views

Published on

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

Published in: Education
  • Be the first to comment

Aula Google Maps API JavaScript V3

  1. 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. 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. 3 Objetivo Fornecer uma visão geral da Família Google Maps API, e alguns detalhes da Google Maps API V3 (Javascript)
  4. 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. 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. 6
  7. 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. 8
  9. 9. 9 Família Google Maps API
  10. 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. 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. 12
  13. 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. 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. 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. 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. 17 Possíveis aplicações Chamada básica da API
  18. 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. 19 Possíveis aplicações
  20. 20. 20 Código fonte
  21. 21. 21 Possíveis aplicações Folha de SP – Usando Google Maps API Flash (3D)
  22. 22. 22 Possíveis aplicações Mostrar densidade populacional
  23. 23. 23 Possíveis aplicações Rastrear de rota com indicador de direção
  24. 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. 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. 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. 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. 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. 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. 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

×