Artigo Java Magazine 43 - Localize-se com Google Maps

Clique aqui para ler esse artigo em PDF.

Localize-se com Google Maps

Adicione mapas, localizações e rotas às suas páginas web

Aprenda como utilizar a API do Google Maps e adicionar mapas, localizações e rotas personalizadas aos seus websites.

Ari Dias Neto

Vamos apresentar neste artigo a API do Google Maps, que fornece uma forma simples e poderosa de adicionar mapas a páginas web, com muitas capacidades de personalização. O Google Maps é um dos destaques da chamada Web 2.0, e usa diversos recursos AJAX.

O Google Maps (ou GMaps) é uma API JavaScript. Mas você pode é claro, usar os recursos do GMaps em aplicações Java para web, em páginas JSP e integrando-se com servlets, entre outras possibilidades.

Para trabalhar com a API é preciso possuir uma chave de acesso. Para obtê-la acesse o link google.com/apis/maps/signup.html. Neste endereço você terá que fornecer a URL de onde usará o Google Maps. Utilizei para este artigo a seguinte URL: http://localhost:8080/Gmaps. Será necessário também ter uma conta do Google. Há algumas outras restrições de uso detalhadas no site.

Assim que clicar no botão Generate API Key, uma nova página abrirá com o valor da chave e um exemplo de como utilizá-la. Observe que esta chave é usada como parâmetro na importação do JavaScript na sua página web:

<script src="http://maps.google.com/maps?

      file=api&amp;v=2&amp;key=CHAVE_GERADA"

      type="text/javascript"></script>

Olá mundo, GMaps

Nosso primeiro exemplo demonstra como exibir um mapa simples, adicionar ferramentas de controle e centralizar a exibição em um ponto dado. A Listagem 1 mostra o código. O corpo do HTML é bem simples, possuindo apenas um elemento <div />.

<div id="map" style="width: 600px; height: 400px"></div>

Esse elemento será utilizado pela API como um “recipiente” para o mapa e tem o ID map. O código JavaScript começa verificando se o browser é compatível (veja a página que lista os browsers suportados nos links). Após a verificação, é instanciado um novo mapa:

var map = new GMap2(document.getElementById("map"));

O parâmetro do construtor define dentro de qual elemento o mapa deverá ser construído. Nesse caso, será o elemento com ID igual a map.

De posse do mapa é então adicionado um controle de tipo de exibição (Mapa, Satélite ou Híbrido) e um controle de zoom:

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());  

As classes JavaScript GSmallMapControl e GMapTypeControl fazem parte da API do GMaps, assim como o objeto GMap2 e a função GBrowserIsCompatible().

O código termina centralizando o mapa em um ponto dado:

map.setCenter(new GLatLng(-23.546559764587933, -46.66567325592041), 16);

A classe GLatLng, também da API do GMaps, será utilizada em todos os exemplos para definir um ponto de localização. Seus parâmetros de instanciação são Latitude e Longitude. O método map.setCenter() define a posição central do mapa e recebe um objeto do tipo GLatLng como parâmetro.

Isso será suficiente para exibir um mapa como mostrado na Figura 1.

A API do Google Maps ainda não permite pesquisar as localizações exatas dos endereços no Brasil. Para descobrir os parâmetros de latitude e longitude utilizamos a seguinte URL: google.com/apis/maps/documentation/polylineutility.html. Esta URL abrirá uma ferramenta na qual é possível definir pontos e traçar linhas entre eles.

Marcadores

Nosso próximo exemplo demonstrará como marcar pontos no mapa. A Listagem 2 mostra apenas o código JavaScript, já que o restante será igual ao primeiro exemplo. A parte nova está na criação de um marcador:

ponto1 = new GLatLng(-23.59903155182487,-46.636962890625);

marcador1 = new GMarker(ponto1);

Anteriormente utilizamos o objeto GLatLng para centralizar o mapa. Dessa vez vamos utilizá-lo para definir a posição do marcador. Fazemos isso através do parâmetro de instanciação da classe GMarker. Com o marcador instanciado, precisamos apenas adicioná-lo ao mapa:

map.addOverlay(marcador1);

Neste exemplo adicionamos quatro localizações de São Paulo: Parque do Ibirapuera, Metrô Santa Cruz, Aeroporto de Congonhas e o Estádio Municipal. O resultado é exibido na Figura 2.

Este mapa ainda não está parecido com o que veríamos no site do Google Maps (local.google.com). Está faltando, entre outras coisas, o popup com a descrição do local.

A Listagem 3 mostra como criar popups e registrar funções para responder a eventos do mouse. A única diferença do exemplo anterior é que adicionamos uma nova função para personalizar nossos marcadores, criaMarcarador(). Esta função além de criar o marcador, registra e cria uma função para tratar o evento de clique do mouse.

var marcador = new GMarker(ponto);

GEvent.addListener(marcador, "click", function() {

...