Eventos em mapas de Google

Para continuar o manual de desenvolvimento de mapas de Google, vamos conhecer o tratamento de eventos. O API de Google Maps tem capacidade para tratar eventos. Isto não é nada novo, porque Javascript também é uma linguagem de programação orientada a eventos e o API dos mapas de Google está baseado em Javascript.

Porém, há que assinalar que o API de Google Maps incorpora vários eventos que são próprios dos mapas de Google e que não fazem parte dos eventos básicos de Javascript. Ademais, assim como as peculiaridades de cada navegador podem fazer o tratamento de eventos distinto entre diferentes plataformas, o API dos mapas de Google é único e funciona em qualquer navegador da mesma maneira, ou seja, é o que chamamos cross-browser.

Os eventos no API se manejam usando funções que se chamam escutadores de eventos, que se têm que registrar dentro do espaço de nomes de GEvent. Cada objeto do API dos mapas de google dispõe de uma série de eventos já definidos, que ademais se executa dentro de um contexto e passam distintos parâmetros para identificar tal contexto. Por exemplo, um mapa de Google tem o evento click (a classe GMap2 tem uma infinidade de eventos diferentes), que se desata quando o usuário clica sobre o mapa. Tal evento passa os argumentos overlay e point, o primeiro para passar uma marca (se é que o usuário clicou em uma marca) e o segundo para passar o ponto geográfico onde se fez o clique, se clicou sobre qualquer área vazia do mapa.

Todos os eventos que suporta o API de Google Maps, para cada classe, estão perfeitamente documentados na referência que oferece Google.

Obter o ponto onde clicou o usuário

Vamos mostrar um primeiro exemplo de tratamento de eventos, muito simples, para extrair o ponto onde o usuário clicou no mapa.

Primeiro, teríamos que criar o mapa, tal como fizemos em anteriores ocasiões, e adicionar-lhe a GEvent um escutador de eventos (Event listener) para quando se clique sobre o mapa.

var map = new GMap2(document.getElementById("map"));   
map.setCenter(new GLatLng(33,0),3);   
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);

GEvent.addListener(map, "click", tratamento_clique);

A linha que temos que ver agora é a última, onde se adiciona o escutador de eventos.

GEvent é a classe que adicionamos o event listener. Ao adicionar um evento para ser escutado temos que prover de três parâmetros:

1. O objeto do API sobre o qual se tem que escutar o evento
2. O nome do evento que queremos detectar e fazer ações quando tiver captado
3. O nome da função que se encarregará de tratar o evento.

Neste caso se adicionou um escutador de evento, para realizar ações quando se "clica" sobre o objeto map, que é o próprio mapa de google. As ações são simplesmente executar a função tratamento_clique (observe que só colocamos o nome da função, sem os parênteses). Agora temos que codificar o comportamento de nosso mapa quando se clica nele, ou seja, codificar a função tratamento_clique().

function tratamento_clique(overlay,point){
   alert ("Olá amigo! Vejo que está aí porque fez um clique!");
   alert ("O ponto onde você clicou é: " + point.toString());
}

Como vemos, a função recebe um par de parâmetros, que são o contexto no qual se detectou o evento. Estes dois parâmetros são:

• overlay: Não vamos utilizá-lo agora. Tem que ver quando o usuário clica em uma marca de um mapa.
• point: que é o ponto ou as coordenadas geográficas onde o usuário fez o clique.

O código da função é simplesmente um par de alert, para mostrar mensagens ao usuário. O primeiro alert simplesmente está para dar uma saudação ao visitante e o segundo mostra as coordenadas (x e y - latitude, longitude) onde se fez o clique. Tais coordenadas se extraem do parâmetro point que recebemos como contexto do evento, ao que passamos o método toString() para que extraia sua codificação em cadeia de caracteres.

Pode-se ver o exemplo em funcionamento em uma página a parte.

Informe de Miguel Angel Alvarez - Tradução de JML