Manejo de de eventos en los mapas de Google. El API de Google maps ofrece funciones y eventos específicos y útiles para tratar cualquier tipo de evento.
Pero hay que señalar que el API de Google Maps incorpora unos cuantos eventos que son propios de los mapas de Google y que no forman parte de los eventos básicos de Javascript. Además, así como las peculiaridades de cada navegador pueden hacer el tratamiento de eventos distinto entre distintas plataformas, el API de los mapas de Google es único y funciona en cualquier navegador de la misma manera, es decir, es lo que llamamos cross-browser.
Los eventos en el API se manejan usando funciones que se llaman escuchadores de eventos, que se tienen que registrar dentro de espacio de nombres de GEvent. Cada objeto del API de los mapas de google dispone de una serie de eventos ya definidos, que además se ejecutan dentro de un contexto y pasan distintos parámetros para identificar tal contexto. Por ejemplo, un mapa de Google tiene el evento click (la clase GMap2 tiene multitud de eventos distintos), que se desata cuando el usuario hace clic sobre el mapa. Dicho evento pasa los argumentos overlay y point, el primero para pasar una marca (si es que el usuario hizo clic en una marca) y el segundo para pasar el punto geográfico donde se hizo clic, si pulsó sobre cualquier área vacía del mapa.
Todos los eventos que soporta el API de Google Maps, para cada clase, están perfectamente documentados en la referencia que ofrece Google.
Sacar el punto donde ha hecho clic el usuario
Vamos a mostrar un primer ejemplo de tratamiento de eventos, muy sencillo, para extraer el punto donde el usuario ha hecho clic en el mapa.
Primero tendríamos que crear el mapa, tal como lo hemos hecho en anteriores ocasiones, y añadirle a GEvent un escuchador de eventos (Event listener) para cuando se hace clic sobre el 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", tratamiento_clic);
La línea que tenemos que ver ahora es la última, donde se añade el escuchador de eventos.
GEvent es la clase a la que añadimos el event listener. Al añadir un evento para ser escuchado tenemos que proveer de tres parámetros:
- El objeto del API sobre el que se tiene que escuchar el evento
- El nombre del evento que queremos detectar y hacer acciones cuando se haya captado
- El nombre de la función que se encargará de tratar el evento.
function tratamiento_clic(overlay,point){
alert ("Hola amigo! Veo que estás ahí porque has hecho clic!");
alert ("El punto donde has hecho clic es: " + point.toString());
}
Como vemos, la función recibe un par de parámetros, que son el contexto en el que se ha detectado el evento. Estos dos parámetros son:
- overlay: No lo vamos a utilizar ahora. Tiene que ver cuando el usuario hace clic en una marca de un mapa.
- point: que es el punto o coordenadas geográficas donde el usuario ha hecho clic.
El ejemplo puede verse en marcha en una página aparte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...