Googlemaps API JAvascript

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

http://maps.google.com/maps/api/js


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


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

http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/reference.html#MapOptions

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.


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.


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.


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.


PolilinhasPara cada ponto da polilinha, definimos um novo objeto LatLng com as coordenadas.


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.


Polilinhas Com este exemplo, esta polilinha deve ser desenhada.


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.


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.


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.


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).


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().


A função alertar() é apenas um window.alert() com uma mensagem que informa que o clique foi capturado.


Devemos ter esse evento acontecendo com o exemplo anterior.


Podemos fazer ainda para que a partir de um evento, seja adicionado um objeto no mapa, como um marker.


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

http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/






Documents

Googlemaps API JAvascript