Averiguar el zoom en un mapa de Google Maps

24/1/08 - Cuando generamos un mapa de Google, utilizando el API de los Google Maps, definimos el zoom con el que tiene que comenzar el mapa. Esta es una tarea que hemos repetido numerosas veces a lo largo del Manual de API de Google Maps. Pero el mapa es interactivo y el usuario utilizándolo puede haber cambiado el zoom, para ampliar o reducir la definició. En este artículo vamos a aprender a obtener el zoom actual de un mapa cuando se produzca un evento, es decir, como respuesta a una acción de un usuario. Los eventos en mapas de Google ya los hemos tratado anteriormente en este manual, de hecho, este artículo va a ampliar otro que ya habíamos realizado: Mostrar la posición de una marca de Google Maps en un formulario. En este caso mostraremos el zoom actual del mapa de google al hacer el usuario clic en el mapa y lo escribiremos en un formulario en la propia página. En realidad saber el zoom en un mapa es simple, sólo tenemos que utilizar el método getZoom() de la clase GMap2. getZoom() devuelve un número entero, que es el zoom actual del mapa.

Pongamos que tenemos el objeto mapa en una variable llamada "map". Pues entonces el método lo ejecutaremos con esto:

zoom_actual = map.getZoom();

Así habríamos guardado en una variable zoom_actual el valor entero del zoom del mapa.

Si queremos mostrar en un formulario en la página el zoom actual, como respuesta al evento clic, haremos algo como esto:

GEvent.addListener(map, "click", function (overlay,point){
   if (point){
      marker.setPoint(point);
      document.posicion.x.value=point.x
      document.posicion.y.value=point.y
      
      zoom_actual = map.getZoom();
      document.posicion.zoom.value=zoom_actual
   }
});

Recordar que para entender bien este código tendremos que leer el artículo anterior, así como posiblemente los precedentes de este manual que tratan sobre eventos.

Bueno, además tendremos que colocar en el formulario un campo nuevo para escribir el zoom del mapa:

zoom actual: <input type="text" name="zoom" value="" />

Esto es todo. Podemos ver el ejercicio en marcha en este enlace.

Para ver el código completo del ejercicio simplemente muestra el código fuente de la página del ejemplo.

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

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.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 sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba