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 claudiomartins2000@gmail.com

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 claudiomartins2000@gmail.com

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