Nov 022012
 

Continuando con la serie que iniciamos con el artículo sobre cómo añadir un mapa de Google en una página web, en este artículo vamos a comentar la manera de trabajar dinámicamente con el mapa, modificando mediante javascript sus características (punto central, nivel de zoom, etc…) y respondiendo a los eventos que genera (cuando el usuario hace click sobre el mismo, o bien lo desplaza o cambia el nivel de zoom).

 En un caso práctico, vamos a suponer que en nuestra base de datos disponemos de una relación de puntos de interés, ya sean las estaciones de servicio existentes en la zona, restaurantes, farmacias, colegios, hospitales, etc. Para cada uno de ellos, además de su descripción, tenemos su latitud y longitud. El objetivo es presentar estos datos en el mapa, y actualizar el mapa cada vez que el usuario lo desplaza o cambia el nivel de zoom. El primer paso para ello es obtener  las coordenadas máxima y mínima del área visible en el mapa.

Cómo obtener las coordenadas máxima y mínima del área visible en el mapa

 Realizando una llamada a getBounds(), obtenemos un objeto de la clase LatLngBounds. Sobre este objeto, llamamos a los métodos getNorthEast() y getSouthWest(), y obtenemos dos objetos de la clase LatLng. Sobre cada uno de ellos, llamamos a los métodos lat() y long(), y obtenemos las latitudes y longitudes máximas y mínimas del área visualizada en el mapa. Ejemplo:
Atención: Puede ocurrir que la longitud mínima sea positiva, y la longitud máxima sea negativa. Esto significa que el mapa está visualizando una zona atravesada por el huso de cambio de día, en donde la longitud pasa de +180 a -179 grados. Por ejemplo, el siguiente mapa:
Devuelve las coordenadas:
    Latitud máxima: 79.37981699053185, mínima: -4.499973444975498
    Longitud máxima: -63.94803161621098, mínima: 64.02071838378902

Cómo obtener los puntos a presentar en el mapa y poner sus iconos sobre el mismo

Una vez que tenemos los límites del área presentada en el mapa, debemos consultar nuestra base de datos para obtener los puntos de interés contenidos en ella. Esto lo podemos hacer fácilmente si utilizamos JQuery, medianta una llamada dinámica ajax, que nos devuelva el resultado en formato JSON.

En el ejemplo, suponemos que hemos desarrollado previamente un script CGI “lee_poi.php” que nos devuelve los datos en formato JSON. La implementación de este script dependerá de la estructura de nuestra base de datos, y queda fuera del alcance de este artículo.

También el código exacto para presentar los puntos sobre el mapa dependerá de la estructura JSON que obtenemos, pero en cualquier caso será muy similar al que presentamos como ejemplo en nuestro anterior artículo sobre Cómo añadir marcadores a un mapa de Google Maps

 

Cómo procesar eventos generados en el mapa

Cuando el usuario interactúa con el mapa, genera eventos. Por ejemplo, cuando desplaza el mapa se producen eventos del tipo “center_changed”. Cuando finaliza de desplazar el mapa, se produce un evento “dragend”.

La aplicación debe registrar un “Event Listener” para cada tipo de evento que se desee procesar. Por ejemplo:

 

Los eventos que genera el usuario cuando interactúa con el mapa son:

  • dragstart, drag, dragend –
    Cuando el usuario comienza a desplazar el mapa, se genera un evento dragstart, y cuando termina se genera un evento dragend. Durante el desplazamiento, se generan eventos “drag” cada vez que se refresca el mapa en pantalla.
  • center_changed, zoom_changed, bounds_changed –
    Se genera un evento center_changed cada vez que cambian las coordenadas del centro como consecuencia de desplazar el mapa.
    Se genera un evento zoom_changed cuando cambia el nivel de zoom.
    Se genera un evento bounds_changed cuando cambian los límites del mapa, ya sea por desplazamiento o por cambio de zoom.
    Nota: Durante un desplazamiento del mapa, se generan eventos continuamente cada vez que se refresca el mapa en pantalla.
  • mouseover, mousemove, mouseout
  • click, dblclick, rightclick

Además, se generan también un evento del tipo ‘idle’ cuando el usuario deja de desplazar el mapa.

Si queremos obtener datos del servidor para actualizar el mapa cuando se produce un cambio, podemos hacer uso de estos eventos para evitar realizar repetidas solicitudes al servidor mientras el usuario está desplazando o cambiando el zoom del mapa:

Ejemplo:

1. Indicar en una variable “dragging” si el usuario está desplazando el mapa

2. Indicar en una variable “mouseIsDown” si el botón del ratón está pulsado. Llamar a la función “refresca_marcadores” cuando deja de pulsarse:

3. indicar en una variable “bounds_modified” si se han modificado los límites del mapa, y guardar en la variable “new_bounds” los nuevos límites

4. Llamar a la función “refresca_marcadores” cuando el mapa queda en estado inactivo:

5. La función “refresca_marcadores” no realiza la llamada al servidor para obtener nuevos datos a presentar en el mapa, si el usuario está desplazando el mapa o hay algún botón del ratón pulsado, o no se han modificado los límites del mapa:

 Publicado por en 6:38 pm

 Deja un comentario

(requerido)

(requerido)