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

Google MapsProgramao para WebProf. Cludio Martins claudiomartins2000@gmail.com1

Objetivo da Aula Compreender o conceito de Google Map Elaborar um mapa e inserir na pgina Exemplos

2

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). Existe uma famlia de aplicaes denominada Google Maps API, que voc integra com seu website: Google Maps JavaScript API Google Maps API for Flash Google Earth API Google Static Maps API Servios da web Google Maps Data API

3

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/

4

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/

5

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/

6

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/

7

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

8

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 Um site de comunidades para mapear trilhas de caminhada Um aplicativo de celular para salvar os restaurantes favoritos

9

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 em www.google.com , clique na opo Mapas 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.

10

'

'

11

Adicionando o marcador de lugar no mapa Pesquise a localizao do local a adicionar no mapa Voc pode ir selecionando diretamente no mapa, ou Pesquisando o endereo na barra de pesquisa, podendo ser as coordenadas geogrficas (longitude, latitude), cep e endereo completo (Cidade, Estado, Pas, endereo, nmero).

12

Localizando pelo endereo

13

Localizando pelas coordenadas

14

Salvando a localizao

15

Editanto o Local do Mapa- Clique em EDITAR, altere as informaes do mapa (clique em OK) - Finalize clicando em PRONTO

16

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. Clique em Criar link para esta pgina no canto superior direito do mapa. 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.

17

Recuperando o cdigo de localizaoClique nesta corrente

Selecione este cdigo18

Exibindo o resultado na pgina html

19

Personalizando a exibio do mapa Se desejar ajustar o tamanho do mapa antes de incorpor-lo, basta clicar em Personalizar e 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, consulte http://maps.google.com.br/help/maps/getmaps20

Personalizando a exibio do mapa

21

Atividades prticas Crie uma coleo de mapas para a regio metropolitana de Belm (Par) Salve as seguintes localidades: Reitoria do IFPA (na Av. Joo Paulo II...) UFPA, no campus Guam Prefeitura de Ananindeua, BR-316

Para cada localidade, exiba uma pgina com o seguinte formato de mapa: Reitoria do IFPA: mapa vetorial pequeno UFPA: mapa mdio, com imagem de satlite Prefeitura de Ananindeua: mapa grande, no formato EARTH (em perspectiva)

22