Aula 5 - Criando Mapas no Google Maps

4,661 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,661
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
72
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Aula 5 - Criando Mapas no Google Maps

  1. 1. <ul>Google Maps </ul><ul>Programação para Web Prof. Cláudio Martin s [email_address] </ul><ul>IFPA-PA Curso de Tecnologia em Análise e Desenvolvimento de Sistemas </ul>
  2. 2. Objetivo da Aula <ul><li>Compreender o conceito de Google Map
  3. 3. Elaborar um mapa e inserir na página
  4. 4. Exemplos </li></ul>
  5. 5. <ul><li>Sobre a Google Maps API </li></ul><ul><li>A Google Maps API é um serviço gratuito oferecido pelo Google, que permite elaborar, exibir e compartilhar mapas tanto em formato vetorial (linhas e pontos), quanto rasterizada (fotos de satélite).
  6. 6. Existe uma família de aplicações denominada Google Maps API, que você integra com seu website: </li><ul><li>Google Maps JavaScript API
  7. 7. Google Maps API for Flash
  8. 8. Google Earth API
  9. 9. Google Static Maps API
  10. 10. Serviços da web
  11. 11. Google Maps Data API </li></ul></ul>
  12. 12. <ul><ul><li>Google Maps JavaScript API </li></ul></ul>Incorpore um mapa do Google em sua página da web usando JavaScript. Manipule o mapa e adicione conteúdo com a ajuda de vários serviços. Versão 3 : http://code.google.com/apis/maps/documentation/javascript/ Versão 2 : http://code.google.com/apis/maps/documentation/javascript/v2/
  13. 13. <ul><ul><li>Google Maps API for Flash </li></ul></ul>Use essa API ActionScript para incorporar um mapa do Google na sua página da web ou aplicativo baseado em Flash. Manipule o mapa em três dimensões e adicione conteúdo com a ajuda de vários serviços. http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/
  14. 14. <ul><ul><li>Google Earth API </li></ul></ul>Incorpore um verdadeiro globo digital em 3D à sua página da web. Leve os seus visitantes a qualquer lugar da Terra (até mesmo nas profundezas dos oceanos) sem tirá-los de sua página da web. http://code.google.com/intl/pt-BR/apis/earth/
  15. 15. <ul><ul><li>Google Static Maps API </li></ul></ul>Incorpore uma imagem simples e rápida do Google Maps em sua página da web ou site para celular sem precisar de códigos JavaScript ou qualquer carregamento dinâmico de página. http://code.google.com/intl/pt-BR/apis/maps/documentation/staticmaps/
  16. 16. <ul><ul><li>Serviços da web </li></ul></ul>Use solicitações de URL para acessar informações de geocodificação, rotas, elevação 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. 17. <ul><ul><li>Google Maps Data API </li></ul></ul>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 (coleções de recursos). Alguns exemplos de uso: <ul><ul><li>Uma ferramenta pessoal para planejar e registrar viagens
  18. 18. Um site de comunidades para mapear trilhas de caminhada
  19. 19. Um aplicativo de celular para salvar os restaurantes favoritos </li></ul></ul>
  20. 20. Como construir um mapa no Google? Para criar um mapa, você deve estar registrado no Google (ser um usuário google). http://code.google.com/intl/pt-BR/apis/maps/signup.html Então, siga os passos: 1. Navegue em www.google.com , clique na opção “Mapas” no topo da página; 2. Escolhe a opção “Meus lugares”, na barra à esquerda do Mapa; 3. Selecione o botão “CRIAR MAPA”; 4. Defina um título e uma descrição para a coleção de mapas. O título servirá para identificar a coleção de mapas (como legenda). No final clique em PRONTO.
  21. 21. ' '
  22. 22. Adicionando o marcador de lugar no mapa <ul><li>Pesquise a localização do local a adicionar no mapa </li><ul><li>Você pode ir selecionando diretamente no mapa, ou
  23. 23. Pesquisando o endereço na barra de pesquisa, podendo ser as coordenadas geográficas (longitude, latitude), cep e endereço completo (Cidade, Estado, País, endereço, número). </li></ul></ul>
  24. 24. Localizando pelo endereço
  25. 25. Localizando pelas coordenadas
  26. 26. Salvando a localização
  27. 27. Editanto o Local do Mapa - Clique em EDITAR, altere as informações do mapa (clique em OK) - Finalize clicando em PRONTO
  28. 28. Como incorporar um mapa em um site ou blog <ul><li>Você pode incorporar um mapa simples, um conjunto de rotas, uma pesquisa local ou mapas criados por outros usuários. Veja como: </li><ul><li>Confira se o mapa que você deseja incorporar aparece na exibição de mapa atual.
  29. 29. Clique em Criar link para esta página no canto superior direito do mapa.
  30. 30. Na caixa exibida, copie o HTML sob &quot;Colar HTML para incorporar em um site&quot; e cole-o no código-fonte do seu site ou blog. </li></ul></ul>
  31. 31. Recuperando o código de localização Clique nesta corrente Selecione este código
  32. 32. Exibindo o resultado na página html
  33. 33. Personalizando a exibição do mapa <ul><li>Se desejar ajustar o tamanho do mapa antes de incorporá-lo, basta clicar em Personalizar e visualizar mapa incorporado, selecionar o tamanho de sua preferência e observar o mapa de visualização. Quando você estiver satisfeito com a aparência, copie o HTML exibido na caixa da parte inferior da janela. </li><ul><li>Não é possível incorporar mapas de trânsito, minimapas e mais alguns recursos do Google Maps. </li></ul><li>Para informações mais detalhadas sobre como adicionar um mapa do Google no seu site, consulte http://maps.google.com.br/help/maps/getmaps </li></ul>
  34. 34. Personalizando a exibição do mapa
  35. 35. Atividades práticas <ul><li>Crie uma coleção de mapas para a região metropolitana de Belém (Pará)
  36. 36. Salve as seguintes localidades: </li><ul><li>Reitoria do IFPA (na Av. João Paulo II...)
  37. 37. UFPA, no campus Guamá
  38. 38. Prefeitura de Ananindeua, BR-316 </li></ul><li>Para cada localidade, exiba uma página com o seguinte formato de mapa: </li><ul><li>Reitoria do IFPA: mapa vetorial pequeno
  39. 39. UFPA: mapa médio, com imagem de satélite
  40. 40. Prefeitura de Ananindeua: mapa grande, no formato EARTH (em perspectiva) </li></ul></ul>

×