Aula Google Maps API JavaScript V3
-
Upload
claudio-martins -
Category
Education
-
view
524 -
download
3
description
Transcript of Aula Google Maps API JavaScript V3
UNID 2 - Banco de dados distribuídos e geográficosUNID 2 - Banco de dados distribuídos e geográficos
IFPACurso 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 [email protected]
2
Objetivo A Google Maps API
Família da Google Maps APIEmpresas usando e como estão usandoNova Google Maps API V3 (Javascript)
Possíveis Aplicações Case da Google Maps API Conclusão
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 MapsIncorporar 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
Mapas estáticosAdicione 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
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
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 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
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
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
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
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
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
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 básica da API
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();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
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
UNID 2 - Banco de dados distribuídos e geográficosUNID 2 - Banco de dados distribuídos e geográficos
IFPACurso 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 [email protected]
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
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
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
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