Evento zoom en un mapa de Google

15/5/08 - Estamos en el manual de creación de Google Maps, tratando los eventos sobre mapas de Google. En este caso vamos a ver un evento que se ejecuta en el momento en el que el usuario cambia el zoom del mapa. Es el evento “zoomend”, que se desata en el momento que el mapa cambia el zoom.

El tratamiento de eventos en mapas de Google ya lo explicamos en el artículo Eventos en mapas de Google, en este caso vamos a ver otro ejemplo de trabajo con eventos, que servirá para ilustrar mejor el tema.

Como se dijo, para crear un tratamiento de un evento producido por el usuario, se tiene que añadir un escuchador de evento con el método addListener de la clase GEvent. Este método tiene que recibir el objeto sobre el que se escuchará el evento, el tipo de evento y la función que se ejecutará como respuesta al evento (el manejador de eventos). Para obtener más explicaciones de este paso consultar el artículo donde se tratan los eventos de mapas de google en general.

El manejador de evento zoomend, es decir, la función que se ejecuta cuando se produce el evento, recibe dos variables. Una es el antiguo zoom que tenía el mapa y otra el nuevo zoom que se ha colocado.

Suponemos que tenemos creado un mapa de google y que está declarado en el objeto map de la clase GMap2. Entonces, si quisiéramos crear un evento para que nos mostrase en una caja de alerta las dos variables con el antiguo zoom y el nuevo, haríamos algo como esto:

GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){
   alert("Has cambiado el zoom del mapa.\nAntiguo Zoom: " + antiguoZoom + "\nNuevo Zoom: " + nuevoZoom);
});

Este simple ejercicio se puede ver en marcha aquí.

Volcamos el zoom en un formulario, cuando se produce el evento

Ahora, por complicarlo algo más, mostramos el zoom en un formulario, que se actualiza cuando el usuario cambia el zoom en el mapa. Parte de este ejercicio lo hemos tratado previamente en otro artículo: Averiguar el zoom en un mapa de Google Maps.

Anteriormente ya hacíamos un volcado del zoom en un formulario, pero si el zoom se cambiaba no se actualizaba el valor hasta que no se cambiaba la marca pulsando el cualquier parte del mapa. Podemos ver lo que estoy diciendo en esta página.

Como se puede ver, hay un formulario en la parte de abajo, que se actualiza cada vez que se resitúa la marca. Ahora vamos a actualizarlo también cuando el usuario cambia el zoom. Para ello tenemos que definir un escuchador del evento zoomend en el mapa.

Realmente, sólo hemos añadido estas líneas para que se produzca el comportamiento deseado cuando se hace zoom en el mapa.

GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){
   document.posicion.zoom.value=nuevoZoom
});

Podemos ver el ejemplo en marcha.

Viendo su código fuente podemos hacernos una idea del ejercicio completo. Pero recordamos que para entenderlo tenemos que seguir el artículo Averiguar el zoom en un mapa de Google Maps.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba