Cómo limitar el zoom y el desplazamiento en Google Maps
En ocasiones nos interesa restringir el desplazamiento del usuario sobre el mapa a un área determinada, o limitar los niveles de zoom máximo y mínimo.
En el caso del zoom la solución es bastante sencilla. Solo hay que sobreescribir los métodos getMinimumResolution() y getMaximumResolution() de cada uno de los tipos de mapas GMapType presentes en nuestro mapa.
Para el caso del desplazamiento, la solución es algo más compleja. Consiste en escuchar el evento move, que es lanzado por el objeto GMap cuando hay un desplazamiento, y comprobar las coordenadas del mapa tras el desplazamiento. Si estas coordenadas quedan fuera del área a la que queremos limitar el desplazamiento, usamos el metodo GMap.setCenter para que el mapa quede dentro de nuesta área.
Esta clase implementa la funcionalidad deseada:
-
/****** TRestricter **********************************************/
-
-
// Constructor
-
TRestricter = function (map) {
-
this.map = map;
-
}
-
// Función que activa la limitación del desplazamiento entre la esquina inferior izquierda
-
// y la esquina superior derecha
-
TRestricter.prototype.restrict = function (sw, ne) {
-
this.map._allowedBounds = new GLatLngBounds(sw, ne);
-
GEvent.addListener(this.map, 'move', this.checkBounds);
-
}
-
// Función que desactiva la limitación del desplazamiento
-
TRestricter.prototype.unrestrict = function () {
-
this.map._allowedBounds = null;
-
}
-
// Listener encargado de comprobar el desplazamiento
-
TRestricter.prototype.checkBounds = function() {
-
if (!this._allowedBounds || this._allowedBounds.contains(this.getCenter())) return;
-
var x = Math.min(Math.max(this.getCenter().lng(), this._allowedBounds.getSouthWest().lng()), this._allowedBounds.getNorthEast().lng());
-
var y = Math.min(Math.max(this.getCenter().lat(), this._allowedBounds.getSouthWest().lat()), this._allowedBounds.getNorthEast().lat());
-
this.setCenter(new GLatLng(y,x));
-
}
-
// Establece los límites de zoom del mapa
-
TRestricter.prototype.zoomLevels = function (min, max) {
-
var array = this.map.getMapTypes() || [];
-
for (var i=0; i
-
array[i].getMinimumResolution = function () { return min };
-
array[i].getMaximumResolution = function () { return max };
-
}
-
}
Y aquí tenemos un ejemplo de la clase en acción
