Averiguar el zoom en un mapa de Google Maps

Cómo saber el zoom que tiene un mapa de Google en un momento dado.

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
  }
});
	

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.

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

- Mostrar descripción de link en la barra de estado
- Botones de radio en Javascript
- Imágenes con efecto polaroid usando JavaScript
- Introducción a AJAX con PHP y formularios
- Evitar el doble envío de un formulario con JavaScript

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