Tutorial da google maps javascript api v3

4.148 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
4.148
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
93
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tutorial da google maps javascript api v3

  1. 1. Tutorial da Google Maps Javascript APIV3Observação: A Google Maps JavaScript API Versão 3 documentada nestas páginas éagora a JavaScript API oficial. A Versão 2 dessa API possui previsão oficial deremoção, de acordo com a nossa política de remoção. Incentivamos você a migrar o seucódigo para esta nova e aprimorada versão! 1. Introdução 2. O "Hello, World" do Google Maps 1. Como declarar o aplicativo como HTML5 2. Como carregar a API do Google Maps V3 3. Elementos DOM do mapa 4. Opções de mapa 5. google.maps.Map - o objeto elementar 6. Como carregar o mapa 3. Latitudes e longitudes 4. Níveis de zoomIntroduçãoO elemento fundamental de qualquer aplicativo da API do Google Maps V3 é o próprio"mapa". Este documento discute o uso do objeto fundamental google.maps.Map e asnoções básicas de operações de mapa. Se você seguiu o tutorial da Versão 2, verá quehá muitas semelhanças. No entanto, existem algumas diferenças. Desse modo, não deixede ler este documento.O "Hello, World" do Google Maps v3O jeito mais fácil de se familiarizar com a API do Google Maps é analisar um simplesexemplo. A página web a seguir exibe um mapa centralizado em Sydney, New SouthWales, Austrália:<!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }</style><script type="text/javascript"src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script><script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644);
  2. 2. var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = newgoogle.maps.Map(document.getElementById("map_canvas"), myOptions); }</script></head><body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div></body></html>Ver exemplo (map-simple.html)Mesmo nesse exemplo simples, há algumas coisas a serem observadas: 1. Declaramos o aplicativo como HTML5 usando a declaração <!DOCTYPE html>. 2. Incluímos a Google Maps JavaScript API usando uma tag script. 3. Criamos um elemento div chamado "map_canvas" para suportar o mapa. 4. Criamos um literal de objeto JavaScript para conter diversas propriedades do mapa. 5. Escrevemos uma função JavaScript para criar um objeto "map". 6. Inicializamos o objeto do mapa a partir do evento onload da tag body.Essas etapas são explicadas a seguir.Como declarar seu aplicativo como HTML5Recomendamos que você declare um verdadeiro DOCTYPE dentro de seu aplicativo daweb. Nestes exemplos, declaramos nossos aplicativos como HTML5 usando o DOCTYPEHTML5 simples, como mostrado a seguir:<!DOCTYPE html>A maioria dos navegadores atuais renderizará o conteúdo que for declarado com esteDOCTYPE em "modo padrão", o que significa que seu aplicativo deve ser maiscompatível entre navegadores. O DOCTYPE também é projetado para ficar defasado. Osnavegadores que não o entendem, o ignoram e usam o "modo quirks" para mostrar seuconteúdo.Alguns CSS que funcionam no modo quirks não são válidos no modo padrão.Especificamente, todos os tamanhos baseados em porcentagem devem ser herdados deelementos de bloco pai. Se algum dos ancestrais não especificar um tamanho, eles sãoatribuídos o tamanho de 0 x 0 pixels. Por esse motivo, incluímos a declaração <style>a seguir:<style type="text/css"> html { height: 100% }
  3. 3. body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }</style>Esta declaração CSS indica que o recipiente do mapa <div> (denominado map_canvas)deverá ocupar 100% da altura do corpo HTML. Observe que é necessário declararespecificamente essas percentagens tanto para <body> quanto para <html>.Como carregar a Google Maps API<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript"src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>O URL http://maps.google.com/maps/api/js aponta para o local de um arquivoJavaScript que carrega todos os símbolos e as definições necessárias ao uso da API doGoogle Maps V3. A sua página deve conter uma tag script que aponte para esse URL.A tag <meta> nesse cabeçalho especifica que esse mapa deve ser exibido na tela inteirae não deve ser redimensionado pelo usuário. Para obter mais informações, consulteComo desenvolver para aparelhos celulares.Também precisamos definir um parâmetro sensor para indicar se esse aplicativo usaum sensor para determinar a localização do usuário. Deixamos esse exemplo como umavariável set_to_true_or_false para enfatizar que você deve definir este valorexplicitamente para true ou false.Ao carregar a Google Maps Javascript API através do URLhttp://maps.google.com/maps/api/js, você pode, como alternativa, carregar maisbibliotecas usando o parâmetro libraries. As bibliotecas são módulos de código quefornecem funcionalidade adicional à principal API Javascript, mas não são carregadas amenos que você as solicite especificamente. Para obter mais informações, consulteBibliotecas da Google Maps API V3.Se seu aplicativo for um aplicativo HTTPS, você pode, em vez disso, preferir carregar aGoogle Maps Javascript API em HTTPS.Elementos DOM do mapa<div id="map_canvas" style="width: 100%; height: 100%"></div>Para que o mapa seja exibido em uma página da web, precisamos reservar um lugar paraele. Normalmente, fazemos isso criando um elemento chamado div e obtendo umareferência a ele no DOM (modelo de objeto do documento) do navegador.No exemplo acima, definimos um <div> chamado "map_canvas" e definimos o seutamanho usando atributos de estilo. Esse tamanho está definido como "100%", ou seja,será expandido para se ajustar ao tamanho dos aparelhos celulares. Talvez seja
  4. 4. necessário ajustar esses valores com base no tamanho da tela e no preenchimento donavegador. O mapa sempre assumirá o tamanho do elemento que o contém, de modoque você sempre deve definir um tamanho em <div> explicitamente.Opções de mapavar myLatlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};Para inicializar um mapa, primeiro criamos um objeto Map options para conter asvariáveis de inicialização do mapa. Esse objeto não é construído; em vez disso, ele écriado como um literal de objeto. Como queremos centralizar o mapa em um pontoespecífico, também criamos um valor latlng para conter esse local e o passamos nasopções do mapa. Para obter mais informações sobre como especificar locais, consulteLatitudes e longitudes abaixo.Também definimos o nível de zoom inicial e mapTypeId comogoogle.maps.MapTypeId.ROADMAP. Os seguintes tipos são suportados: ROADMAP exibe as blocos 2D normais, padrão, do Google Maps. SATELLITE exibe blocos fotográficos. HYBRID exibe uma mistura entre blocos fotográficos e uma camada de blocos com recursos importantes (estradas, nomes de cidade). TERRAIN exibe blocos de relevo físico para exibição de recursos de elevação e água (montanhas, rios etc.).Diferentemente do que ocorre na API do Google Maps V2, não existe nenhum tipo demapa padrão. Você deve definir um tipo de mapa inicial específico para ver os blocosapropriados.Para obter mais informações sobre tipos de mapa, consulte a seção Tipos de mapa. Noentanto, na maioria dos casos, é necessário saber utilizar somente os tipos básicosacima.google.maps.Map - o objeto elementarvar map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);A classe JavaScript que representa um mapa é a classe Map. Os objetos dessa classedefinem um único mapa em uma página. Você pode criar mais de uma instância dessaclasse. Cada objeto definirá um mapa diferente na página. Criamos uma nova instânciadessa classe usando o operador JavaScript new.Ao criar uma nova instância do mapa, você especifica um elemento HTML <div> napágina como um recipiente para o mapa. Os nós HTML são filhos do objeto JavaScript
  5. 5. document e obtemos uma referência a esse elemento pelo métododocument.getElementById().Esse código define uma variável (chamada map) e a atribui a um novo objeto Map, alémde passar as opções definidas no literal de objeto myOptions. Essas opções serão usadaspara inicializar as propriedades do mapa. A função Map() é conhecida como construtore a sua definição é mostrada a seguir: Construtor Descriçãogoogle.maps.Map( Cria um novo mapa usando os parâmetros opcionaisopts?) passados no parâmetro opts.Como carregar o mapa <body onload="initialize()">Durante a renderização de uma página HTML, o DOM é criado e todas as imagens escripts externos são recebidos e incorporados ao objeto document. Para garantir quenosso mapa seja colocado na página após ela ter sido totalmente carregada, sóexecutamos a função que cria o objeto Map depois que o elemento <body> da páginaHTML recebe um evento onload. Isso evita um comportamento imprevisível e nos dámais controle sobre como e quando o mapa é desenhado.O atributo onload da tag body é um exemplo de um manipulador de evento. A APIJavascript do Google Maps fornece ainda um conjunto de eventos que podem sermanipulados para determinar alterações de estado. Para obter mais informações,consulte Eventos de mapa.Ver exemplo (map-simple.html)Latitudes e longitudesPrecisamos de uma forma para fazer referência às localizações do mapa O objetogoogle.maps.LatLng fornece um mecanismo assim na API do Google Maps. Vocêcria um objeto LatLng, passando seus parâmetros na ordem { latitude, longitude }: var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)Observação: O processo de transformar um endereço em um ponto geográfico éconhecido como geocodificação. A geocodificação é suportada nesta versão da API doGoogle Maps. Para obter mais informações, consulte Geocodificação na seção deserviços.Os objetos LatLng têm muitos usos na API do Google Maps. O objetogoogle.maps.Marker usa um LatLng no seu construtor, por exemplo, e coloca umasobreposição de marcador no mapa no local geográfico especificado.
  6. 6. Níveis de zoomOferecer um mapa de toda a Terra como uma única imagem exigirá um mapa imenso ouum pequeno mapa com resolução muito baixa. Como resultado, as imagens de mapas doGoogle Maps e da API do Google Maps são divididas em "blocos" de mapa e "níveis dezoom". Em baixos níveis de zoom, um pequeno conjunto de blocos de mapa abrangeuma vasta área. Em níveis de zoom mais altos, os blocos têm uma resolução maior eabrangem uma área menor.Especifique a resolução na qual exibir um mapa definindo a propriedade zoom do Map,onde o 0 do zoom corresponde a um mapa da Terra totalmente ampliado e níveis dezoom mais altos aumentam o zoom em uma resolução maior.As três imagens seguintes refletem o mesmo local de Tóquio em níveis de zoom de 0,7e 18.

×