googlemaps api javascript
DESCRIPTION
google apisTRANSCRIPT
![Page 1: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/1.jpg)
API JavaScript
INSTITUTO FEDERAL DE EDUCAÇÃO E TECNOLOGIA DA PARAÍBA - CAJAZEIRASCURSO SUPERIOR DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
Diogo Dantas Moreira
![Page 2: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/2.jpg)
ROTEIRO
Introdução Primeiros passos
Tipos de Mapa O “Hello, world” do Google Maps
Inserindo objetos no mapa Marcador Marcador com imagem Polilinha Polígono
Escuta de eventos no mapa Referências
![Page 3: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/3.jpg)
INTRODUÇÃO
A API do Google Maps permite usar Javascript para incorporar elementos do Google Maps em páginas web.
Oferece diversas ferramentas para manipular mapas e adicionar contéudo, oferecendo a oportunidade de criar uma aplicação robusta e personalizada para um website.
![Page 4: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/4.jpg)
INTRODUÇÃO
Implicações Legais Para utilizar os serviços da API do Google Maps
gratuitamente, a aplicação deve prover acesso gratuito ao usuário final, seja ela por uma interface web ou disponibilizando o download gratuito da aplicação
É possível cobrar dos usuários para incluir serviços no seu mapa, porém, ainda assim é necessário que o usuário tenha acesso as informações de forma gratuita.
![Page 5: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/5.jpg)
PRIMEIROS PASSOS
O elemento fundamental de qualquer aplicativo da API do Google Maps V3 é o próprio "mapa".
![Page 6: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/6.jpg)
PRIMEIROS PASSOS
Dentro dos mapas, podemos interagir de várias formas: Marcar pontos no mapa Inserir ícones no mapa Traçar polilinhas Desenhar polígonos Exibir janelas de informação Importar dados de tipos KML e GeoRSS
![Page 7: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/7.jpg)
PRIMEIROS PASSOS
Dentre os novos serviços da API v3, os que merecem mais destaque são: Serviço de Geocodificação Serviço de Rotas Serviço de Street View
![Page 8: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/8.jpg)
TIPOS DE MAPA
O desenvolvedor pode utilizar o mapa em 4 tipos distintos:
![Page 9: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/9.jpg)
TIPOS DE MAPA
Roadmap (Padrão)
![Page 10: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/10.jpg)
TIPOS DE MAPA
Satellite
![Page 11: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/11.jpg)
TIPOS DE MAPA
Hybrid (Satellite + Roadmap)
![Page 12: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/12.jpg)
TIPOS DE MAPA
Terrain
![Page 13: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/13.jpg)
O “HELLO, WORLD” DO GOOGLE MAPS
Toda página que faz uso da API Google Maps deve ter uma tag <script> que aponte para o endereço http://maps.google.com/maps/api/js
Essa tag carrega todas as definições necessárias para o uso da API
![Page 14: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/14.jpg)
O “HELLO, WORLD” DO GOOGLE MAPS
O parâmetro sensor serve para indicar se esse aplicativo usa um sensor para determinar a localização do usuário.
Isso é especialmente importante para dispositivos móveis
![Page 15: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/15.jpg)
O “HELLO, WORLD” DO GOOGLE MAPS
Código Javascript para a instanciação do mapa.
![Page 16: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/16.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSCriamos uma função Javascript que iremos chamar para que o mapa seja instanciado
![Page 17: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/17.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSCriaremos um objeto do tipo LatLng. O objeto LatLng é um ponto das coordenadas geográficas de latitude e longitude. Vai servir para definir o ponto central do mapa.
![Page 18: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/18.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSPara inicializar um mapa, primeiro criamos um objeto literal Map options para conter as variáveis de inicialização do mapa.
![Page 19: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/19.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSO Zoom do mapa.
![Page 20: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/20.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSO centro do mapa. Aqui usaremos nosso objeto LatLng que criamos anteriormente.
![Page 21: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/21.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSAqui definimos qual será o tipo de mapa que será instanciado. ROADMAP, SATELLITE, HYBRID OU TERRAIN.
![Page 22: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/22.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSAlém desses atributos, existem várias opções para o mapa. Elas estão descritas na API detalhadamente:http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/reference.html#MapOptions
![Page 23: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/23.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSEnfim, o construtor do objeto Mapa. Ele recebe um recipiente HTML (geralmente um DIV) e o objeto literal de opções que foi definido anteriormente.
![Page 24: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/24.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSNo corpo da página, definimos uma DIV com o ID que será chamado na função Javascript .
![Page 25: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/25.jpg)
O “HELLO, WORLD” DO GOOGLE MAPSNa tag <body> definimos que na função onLoad (quando carregar todos os elementos da página) ele chame a função mostrarmapa(). É opcional, você pode chamar essa função de qualquer local depois.
![Page 26: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/26.jpg)
O “HELLO, WORLD” DO GOOGLE MAPS
Ao final desses passos, você deve ter essa instância do mapa na sua página HTML.
![Page 27: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/27.jpg)
INSERINDO OBJETOS NO MAPA
Marcadores Para inserir um marcador no mapa, precisamos apenas da
sua posição (um objeto do tipo LatLng) e o mapa que irá mostrar o marcador.
![Page 28: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/28.jpg)
INSERINDO OBJETOS NO MAPA
Marcadores com imagem Mesma coisa do marcador comum, a diferença vai ser o
atributo icon que vai fazer com que sua representação mude.
![Page 29: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/29.jpg)
INSERINDO OBJETOS NO MAPA
Polilinhas Uma polilinha é uma seqüência conectada de segmentos
criados como um objeto único. Para criarmos uma polilinha no Google Maps precisamos
criar um objeto LatLng para cada segmento.
![Page 30: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/30.jpg)
INSERINDO OBJETOS NO MAPA
PolilinhasPara cada ponto da polilinha, definimos um novo objeto LatLng com as coordenadas.
![Page 31: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/31.jpg)
INSERINDO OBJETOS NO MAPA
PolilinhasO Construtor da objeto Polyline recebe o atributo que representa os pontos e alguns atributos como cor da linha, opacidade e demais.Além disso, temos que declarar de qual mapa é esse objeto.
![Page 32: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/32.jpg)
INSERINDO OBJETOS NO MAPA
Polilinhas Com este exemplo, esta polilinha deve ser desenhada.
![Page 33: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/33.jpg)
INSERINDO OBJETOS NO MAPA
Polígonos Um polígono é uma figura geométrica plana limitada por
uma linha poligonal fechada. No Google Maps, podemos criar um polígono usando as
coordenadas de cada ponto, igual a criação da polilinha.
![Page 34: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/34.jpg)
INSERINDO OBJETOS NO MAPA
Polígonos
Definimos as coordenadas do Polígono.Cada ponto do polígono é um novo objeto LatLng, o último, nesse caso, é igual ao primeiro.
É possível também ignorar o último ponto, o Maps irá fazer o “auto-close” e vai ligar o ultimo ponto ao inicial.
![Page 35: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/35.jpg)
INSERINDO OBJETOS NO MAPA
PolígonosO construtor do Polígono recebe as coordenadas no atributo “path”. Existem os atributos para a estilização do polígono como “strokeColor”, “fillColor”.Além disso, é necessário definir no atributo map em qual mapa esse polígono será exibido.
![Page 36: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/36.jpg)
INSERINDO OBJETOS NO MAPA
Polígonos Com este exemplo, este polígono deve ser exibido.
![Page 37: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/37.jpg)
ESCUTA DE EVENTOS NO MAPA
No Google Maps, podemos adicionar ouvintes para eventos quaisquer do mapa.
Para add um evento devemos usar o elemento event do google.maps Exemplo: google.maps.event.addListener(objeto observado, em qual
ação, qual função será executada).
![Page 38: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/38.jpg)
ESCUTA DE EVENTOS NO MAPA
Neste evento estamos adicionando um ouvinte para o objeto “map” (que é a instancia de mapa), para que quando a ação “click” for realizada, ele chame a função alertar().
![Page 39: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/39.jpg)
ESCUTA DE EVENTOS NO MAPA
A função alertar() é apenas um window.alert() com uma mensagem que informa que o clique foi capturado.
![Page 40: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/40.jpg)
ESCUTA DE EVENTOS NO MAPA
Devemos ter esse evento acontecendo com o exemplo anterior.
![Page 41: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/41.jpg)
ESCUTA DE EVENTOS NO MAPA
Podemos fazer ainda para que a partir de um evento, seja adicionado um objeto no mapa, como um marker.
![Page 42: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/42.jpg)
ESCUTA DE EVENTOS NO MAPA
Será exibido um alerta com a latitude e longitude deste ponto, além de criar um novo marcador.
![Page 43: Googlemaps API JAvascript](https://reader034.vdocument.in/reader034/viewer/2022052315/557202a44979599169a3e166/html5/thumbnails/43.jpg)
REFERÊNCIAS Google Maps API JavaScript
http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/ Exemplos com a API
http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/examples/index.html