1.

• Google Maps

• Programao para Web Prof. Cludio Martin s [email_address]

• IFPA-PA Curso de Tecnologia em Anlise e Desenvolvimento de Sistemas

2. Objetivo da Aula

Compreender o conceito de Google Map 3. Elaborar um mapa e inserir na pgina 4. Exemplos

5.

Sobre a Google Maps API

A Google Maps API um servio gratuito oferecido pelo Google, que permite elaborar, exibir e compartilhar mapas tanto em formato vetorial (linhas e pontos), quanto rasterizada (fotos de satlite). 6. Existe uma famlia de aplicaes denominada Google Maps API, que voc integra com seu website:

• Google Maps JavaScript API 7. Google Maps API for Flash 8. Google Earth API 9. Google Static Maps API 10. Servios da web 11. Google Maps Data API

12.

• Google Maps JavaScript API

Incorpore um mapa do Google em sua pgina da web usando JavaScript.Manipule o mapa e adicione contedo com a ajuda de vrios servios. Verso 3 :http://code.google.com/apis/maps/documentation/javascript/ Verso 2 :http://code.google.com/apis/maps/documentation/javascript/v2/ 13.

• Google Maps API for Flash

Use essa API ActionScript para incorporar um mapa do Google na sua pgina da web ou aplicativo baseado em Flash.Manipule o mapa em trs dimenses e adicione contedo com a ajuda de vrios servios. http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/ 14.

• Google Earth API

Incorpore um verdadeiro globo digital em 3D sua pgina da web.Leve os seus visitantes a qualquer lugar da Terra (at mesmo nas profundezas dos oceanos) sem tir-los de sua pgina da web. http://code.google.com/intl/pt-BR/apis/earth/ 15.

• Google Static Maps API

Incorpore uma imagem simples e rpida do Google Maps em sua pgina da web ou site para celular sem precisar de cdigos JavaScript ou qualquer carregamento dinmico de pgina.http://code.google.com/intl/pt-BR/apis/maps/documentation/staticmaps/ 16.

• Servios da web

Use solicitaes de URL para acessar informaes de geocodificao, rotas, elevao e lugares dos aplicativos cliente e manipule os resultados em JSON ou XML.http://code.google.com/intl/pt-BR/apis/maps/documentation/webservices/index.html 17.

• Google Maps Data API

A API de dados do Google Maps permite que os aplicativos cliente visualizem, armazenem e atualizem dados do mapa na forma de feeds da API de dados do Google usando um modelo de dados de recursos (marcadores, linhas e formas) e mapas (colees de recursos). Alguns exemplos de uso:

• Uma ferramenta pessoal para planejar e registrar viagens 18. Um site de comunidades para mapear trilhas de caminhada 19. Um aplicativo de celular para salvar os restaurantes favoritos

20. Como construir um mapa no Google? Para criar um mapa, voc deve estar registrado no Google (ser um usurio google).http://code.google.com/intl/pt-BR/apis/maps/signup.html Ento, siga os passos: 1. Navegue emwww.google.com, clique na opoMapas no topo da pgina; 2. Escolhe a opo Meus lugares, na barra esquerda do Mapa; 3. Selecione o boto CRIAR MAPA; 4. Defina um ttulo e uma descrio para a coleo de mapas. O ttulo servir para identificar a coleo de mapas (como legenda). No final clique em PRONTO. 21. ' ' 22. Adicionando o marcador de lugar no mapa

Pesquise a localizao do local a adicionar no mapa

• Voc pode ir selecionando diretamente no mapa, ou 23. Pesquisando o endereo na barra de pesquisa, podendo ser as coordenadas geogrficas (longitude, latitude), cep e endereo completo (Cidade, Estado, Pas, endereo, nmero).

24. Localizando pelo endereo 25. Localizando pelas coordenadas 26. Salvando a localizao 27. Editanto o Local do Mapa - Clique em EDITAR, altere as informaes do mapa (clique em OK) - Finalize clicando em PRONTO 28. Como incorporar um mapa em um site ou blog

Voc pode incorporar um mapa simples, um conjunto de rotas, uma pesquisa local ou mapas criados por outros usurios. Veja como:

• Confira se o mapa que voc deseja incorporar aparece na exibio de mapa atual. 29. Clique em Criar link para esta pgina no canto superior direito do mapa. 30. Na caixa exibida, copie o HTML sob "Colar HTML para incorporar em um site" e cole-o no cdigo-fonte do seu site ou blog.

31. Recuperando o cdigo de localizao Clique nesta corrente Selecione este cdigo 32. Exibindo o resultado na pgina html 33. Personalizando a exibio do mapa

Se desejar ajustar o tamanho do mapa antes de incorpor-lo, basta clicar emPersonalizare visualizar mapa incorporado, selecionar o tamanho de sua preferncia e observar o mapa de visualizao. Quando voc estiver satisfeito com a aparncia, copie o HTML exibido na caixa da parte inferior da janela.

• No possvel incorporar mapas de trnsito, minimapas e mais alguns recursos do Google Maps.

Para informaes mais detalhadas sobre como adicionar um mapa do Google no seu site, consultehttp://maps.google.com.br/help/maps/getmaps

34. Personalizando a exibio do mapa 35. Atividades prticas

Crie uma coleo de mapas para a regio metropolitana de Belm (Par) 36. Salve as seguintes localidades:

• Reitoria do IFPA (na Av. Joo Paulo II...) 37. UFPA, no campus Guam 38. Prefeitura de Ananindeua, BR-316

Para cada localidade, exiba uma pgina com o seguinte formato de mapa:

• Reitoria do IFPA: mapa vetorial pequeno 39. UFPA: mapa mdio, com imagem de satlite 40. Prefeitura de Ananindeua: mapa grande, no formato EARTH (em perspectiva)