Post on 25-Jul-2015
description
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
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
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.
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.
PRIMEIROS PASSOS
O elemento fundamental de qualquer aplicativo da API do Google Maps V3 é o próprio "mapa".
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
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
TIPOS DE MAPA
O desenvolvedor pode utilizar o mapa em 4 tipos distintos:
TIPOS DE MAPA
Roadmap (Padrão)
TIPOS DE MAPA
Satellite
TIPOS DE MAPA
Hybrid (Satellite + Roadmap)
TIPOS DE MAPA
Terrain
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
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
O “HELLO, WORLD” DO GOOGLE MAPS
Código Javascript para a instanciação do mapa.
O “HELLO, WORLD” DO GOOGLE MAPSCriamos uma função Javascript que iremos chamar para que o mapa seja instanciado
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.
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.
O “HELLO, WORLD” DO GOOGLE MAPSO Zoom do mapa.
O “HELLO, WORLD” DO GOOGLE MAPSO centro do mapa. Aqui usaremos nosso objeto LatLng que criamos anteriormente.
O “HELLO, WORLD” DO GOOGLE MAPSAqui definimos qual será o tipo de mapa que será instanciado. ROADMAP, SATELLITE, HYBRID OU TERRAIN.
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
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.
O “HELLO, WORLD” DO GOOGLE MAPSNo corpo da página, definimos uma DIV com o ID que será chamado na função Javascript .
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.
O “HELLO, WORLD” DO GOOGLE MAPS
Ao final desses passos, você deve ter essa instância do mapa na sua página HTML.
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.
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.
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.
INSERINDO OBJETOS NO MAPA
PolilinhasPara cada ponto da polilinha, definimos um novo objeto LatLng com as coordenadas.
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.
INSERINDO OBJETOS NO MAPA
Polilinhas Com este exemplo, esta polilinha deve ser desenhada.
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.
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.
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.
INSERINDO OBJETOS NO MAPA
Polígonos Com este exemplo, este polígono deve ser exibido.
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).
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().
ESCUTA DE EVENTOS NO MAPA
A função alertar() é apenas um window.alert() com uma mensagem que informa que o clique foi capturado.
ESCUTA DE EVENTOS NO MAPA
Devemos ter esse evento acontecendo com o exemplo anterior.
ESCUTA DE EVENTOS NO MAPA
Podemos fazer ainda para que a partir de um evento, seja adicionado um objeto no mapa, como um marker.
ESCUTA DE EVENTOS NO MAPA
Será exibido um alerta com a latitude e longitude deste ponto, além de criar um novo marcador.
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