A Google revolucionou o universo digital com o Google Earth, uma ferramenta simples e de fácil utilização que levou para o mundo externo conceitos e informações que antes circulavam somente no mundo do geo. Seguindo nessa tendência, a empresa lançou o Google Maps (maps.google.com), uma versão do Google Earth voltada para o ambiente web. Agora, com o Google Maps API, usuários de todo o mundo podem incluir mapas iguais ao do Google Maps nas suas próprias páginas sem a necessidade de aquisição de qualquer software ou equipamento. Neste artigo, veremos como publicar dados de cinco parques nacionais em uma página. Os arquivos utilizados estão disponíveis no endereço www.geoplus.com.br/mundogeo/googlemaps.zip. Fique à vontade e aproveite a leitura!

O que é o Google Maps API?

O Google Maps API é uma biblioteca de programação em JavaScript que permite incluir mapas em páginas de internet. Seu uso é livre para aplicações sem fins lucrativos. Para uso comercial existe suporte pago da própria Google. Para ler os termos de uso veja o endereço http://www.google.com/apis/maps/terms.html.

Registro e chave da API

O primeiro passo para utilizar a API é registrar-se no endereço www.google.com/apis/maps/signup.html. O processo é bastante simples e o leitor deve possuir uma conta no Gmail. A única informação solicitada é o endereço onde a página será hospedada. Nos exemplos deste artigo será utilizado o endereço www.geoplus.com.br/mundogeo, mas cada leitor deve fornecer o seu próprio endereço caso queira realizar os testes.

Após o registro é fornecida uma chave que será em todos os exemplos. A chave é individual e válida somente para o endereço fornecido no momento do registro e para os sub-diretórios. No caso de www.geoplus.com.br/mundogeo a chave fornecida foi: ABQIAAAAD1HGclNa5uV4vJThilIJLhQaXHtLmN4VWoztVC392TfzRfqNRxT0FQLSw-Xiv_Svp2OcuARcXSlsVdQ.

Exemplo1- Preparando uma página html

Google API - Preparando uma página html

<!–CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”O exemplo 1 mostra uma página sem suporte aos mapas, mas já com uma área reservada para visualizá-lo. A linha cria uma área para o mapa. Caso o tamanho do mapa não seja definido utilizando a API, então ele terá o tamanho do DIV. Para ver as características desse DIV, procure no arquivo estilo.css pela palavra area_do_mapa. Para visualizar o resultado do exemplo 1 abra o navegador e no endereço http://www.geoplus.com.br/mundogeo/exemplo1.html.

Google API - Exemplo 1

->Tela do exemplo 1

Exemplo2 – Incluindo um mapa
Com a chave em mãos já é possível alterar a página do exemplo 1 para incluir um mapa

Google API - Incluindo um mapa

No exemplo 2 já é possível visualizar o código necessário para incluir um mapa com tamanho de 300 x 500 pixels em uma página. Na linha 8 é fornecido o endereço para o arquivo da API do Google Maps.

É importante lembrar que todas as páginas onde for necessário apresentar um mapa devem incluir esta linha. Além do endereço, é informado que será utilizado a versão 2 da API (file=api&v=2&) e a chave fornecida durante o registro.(key=ABQIAAAAD1HGclNa5uV4v…).

No momento de executar os seus próprios exemplos o leitor deve lembrar-se de alterar a chave dos exemplos pela chave criada para o seu endereço.

Entre a linha 13 e 20 existe a função load() que é executada no momento em que a página é carregada. Esta função verifica se o navegador que o usuário utiliza possui suporte para a API e caso contrário gera um aviso.

Entre os navegadores suportados estão o IE 6.0 ou mais recente e o FireFox 0.8 ou mais recente. Uma lista completa está disponível em http://local.google.com/support/bin/answer.py?answer=16532&topic=1499.

Na linha 15 é criado um objeto map do tipo GMap2. Este objeto representa um mapa na página e é com ele que serão feitas a maior parte das configurações necessárias para visualizar o mapa. No momento da criação deste objeto é informado o nome de um elemento da página que irá conter o mapa. Neste exemplo o elemento indicado é DIV area_do_mapa.

Logo abaixo da criação do objeto map é feita a primeira configuração do mapa. Utilizando o método setCenter é possível definir a localização do centro do mapa, o zoom e o tipo de mapa. No exemplo 2 o mapa está sendo centralizado no ponto -25.10, -48.53333 e o nível do zoom é 2, o que permite visualizar toda a América do Sul.

A função GLatLng (lat, lon) cria um ponto com as coordenadas lat e lon.

Para visualizar o resultado do exemplo 2 veja no endereço www.geoplus.com.br/exemplo2.html.

Google API - Exemplo 2

->Tela do exemplo 2

Exemplo 3 – Adicionando controles ao mapa

O exemplo 2 não permite que o usuário possa realizar qualquer tipo de operação no mapa, como aproximar, afastar ou mover. Para adicionar mais controles ao mapa, será utilizado o método addControl. No exemplo abaixo são incluídos os controles GSmallMapControl (controle com botões para mover, aproximar e afastar), GMapTypeControl (controle para alternar entre os tipos de mapas) e o GScaleControl (controle para mostrar a escala do mapa)

Para habilitar os controles, faça uma cópia do arquivo exemplo2.html e altere o nome para exemplo3.html. Depois, inclua as alterações destacadas no box ao lado. Para visualizar o resultado veja no endereço www.geoplus.com.br/mundogeo/exemplo3.html

Google API - Exemplo 3 - Adicionando controles ao mapa

->Tela do exemplo 3

Exemplo 4 – Adicionando pontos ao mapa

Para adicionar pontos ao mapa, é possível utilizar o método map.addOverlay e GMarker informando as coordenadas do ponto. No exemplo 4 vamos adicionar cinco pontos de parques nacionais ao mapa. A seqüência utilizada é:

1) Criar o ponto com GLatLng,
2) Criar uma marca utilizando GMarker,
3)Adicionar ao mapa utilizando addOverlay.

Como não foi definido um símbolo para as marcas, a API do Google Maps vai utilizar símbolo default. Para os leitores que desejem, é possível adicionar símbolos personalizados. Para mais informações veja o link www.google.com/apis/maps/documentation/reference.html#GMarker.

Além das novas marcas, o mapa do exemplo já inicia com a imagem de satélite de fundo. Isto foi possível adicionando um terceiro parâmetro ao método setCenter, o G_SATELLITE_MAP, para mostrar o mapa híbrido o parâmetro seria G_HYBRID_MAP.

Google API - Exemplo 4 - Adicionando pontos ao mapa

->Tela do exemplo 4

Exemplo 5 – Adicionando caixas de informação aos pontos do mapa

No exemplo 4 já conseguimos incluir as marcas no mapa. O ideal agora é que o usuário possa clicar sobre a marca e visualizar algumas informações sobre os parques. Para isto vamos trabalhar com dois novos conceitos: eventos e caixas de informação. Um evento é uma ação que ocorre dentro do mapa. Podemos considerar como eventos o clique no mapa, o duplo clique, o mover o mouse e o mover o mapa, entre outros. No exemplo 5 usaremos o evento “clique” sobre uma marca para abrir uma caixa de informações com o nome, área e um link para informações sobre o parque representado por aquela marca.



No código do exemplo 5, adicionamos entre a criação das marcas e a inclusão no mapa um novo método chamado GEvent.addListener. Para cada evento que desejamos tratar é necessário criar este listener, que fica aguardando pela ocorrência de um determinado evento em um objeto.

Neste caso criamos 5 listener que ficam aguardando pela ocorrência de um clique em cada uma da marcas criadas anteriormente. No momento em que o evento ocorre, a API executa uma ação. A ação que desejamos é a criação de uma caixa de informação utilizando o método openInfoWindowHtml. O parâmetro que passamos para openInfoWindowHtml é texto em HTML. Portanto, aqui fica aberto para a criatividade do usuário o campo de possibilidades.

Google API - Exemplo 5 - Adicionando caixas de informação aos pontos do mapa

->Tela do exemplo 5

Próximos passos

A API do Google Maps fornece a possibilidade de adicionarmos mapas e dados espaciais às nossas aplicações web de uma forma bastante simples e prática. Várias tendências estão sendo criadas sobre essa tecnologia, como os mashups, sites que integram informações não espaciais com mapas.

As possibilidades são imensas e iniciar-se nesta tecnologia não é difícil, como visto neste artigo. Um pouco de conhecimento de XHTML e JavaScript ajudam bastante no entendimento dos códigos e da documentação. Revise o código apresentado e faça alterações para verificar os resultados. Logo o leitor estará publicando mapas dentro de seu site.

Algumas páginas relacionadas

Documentação da API
www.google.com/apis/maps/documentation

Blog Oficial da API
http://googlemapsapi.blogspot.com

Tutoriais interessantes sobre HTM, XHTML e JavaScript
www.schools.com

Download dos exemplos apresentados no artigo
www.geoplus.com.br/mundogeo/googlemaps.zip

Roberto Oliveira Santos
Oracle Certified Professional e mestrando em ciência da computação pela UFPR, diretor técnico da GeoPlus Geotecnologia e Informática Ltda
roberto@geoplus.com.br