Eventos en mapas de Google

El API de Google maps ofrece funciones y eventos específicos y útiles para tratar cualquier tipo de evento.

Para continuar el manual de desarrollo de mapas de Google, vamos a conocer el tratamiento de eventos. El API de Google Maps tiene capacidad para tratar eventos. Esto no es nada nuevo, porque Javascript también es un lenguaje de programación orientado a eventos y el API de los mapas de Google está basado en Javascript.

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:

1. El objeto del API sobre el que se tiene que escuchar el evento
2. El nombre del evento que queremos detectar y hacer acciones cuando se haya captado
3. El nombre de la función que se encargará de tratar el evento.

En este caso se ha añadido un escuchador de evento, para realizar acciones cuando se hace "clic" sobre el objeto map, que es el propio mapa de google. Las acciones son simplemente ejecutar la función tratamiento_clic (fíjate que sólo ponemos el nombre de la función, sin los paréntesis). Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace clic en él, es decir, codificar la función tratamiento_clic().

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 código de la función es simplemente un par de alert, para mostrar mensajes al usuario. El primer alert simplemente está para dar un saludo al visitante y el segundo muestra las coordenadas (x e y - latitud, longitud) donde se ha hecho clic. Dichas coordenadas se extraen del parámetro point que hemos recibido como contexto del evento, al que hemos pasado el método toString() para que extraer su codificación en cadena de caracteres.

El ejemplo puede verse en marcha en una página aparte.

Autor: Miguel Angel Alvarez

Usuarios que han visto este tema también han visto...

- Los Bucles en JavaScript
- Precarga simple para página web
- El for en JavaScript
- Cómo colocar los códigos Javascript
- Efectos del Ratón

- Versión imprimible de este documento
- Enviar por e-mail este documento