Artigo Java Magazine 43 - Localize-se com Google Maps

Esse artigo faz parte da revista Java Magazine edição 43. Clique aqui para ler todos os artigos desta edição

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" ></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 " [...] continue lendo...