Una de las novedades del Google Maps API Utility Library Open Source es el Drag Zoom Control desarrollada por Andre Lewis.
Este control es una evolución del control GZoom y nos permite definir un área dentro del mapa para hacer un zoom sobre ella.
Para poder utilizar este control lo primero que tenemos que hacer es descargarnos el archivo dragzoom.js, el cual posee el código con el control. También nos podemos descargar el archivo dragzoom_packed.js, el cual contiene el código empaquetado.
Antes de empezar a codificar este ejemplo es bueno que te leas Cargando Google Maps y Añadiendo Controles a Google Maps.
Lo primero que haremos será cargar la librería javascript del Dragon Zoom.
<script src="dragzoom.js" type="text/javascript"></script>
Además deberemos de tener cuidado con un par de cosas:
1. El documento donde lo utilicemos deberá de ser un doctype XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
2. Para que funcione en el Internet Explorer deberemos de habilitar el comportamiento VML
<style type="text/css">v:* {behavior:url(#default#VML);}</style>
Ahora solo nos quedará cargar el control. Para ello deberemos de instanciar la clase DragZoom(), esto lo haremos añadiendo dicho control al mapa.
map.addControl(new DragZoomControl());
Visualizar el ejemplo | Descargar el código
Vía: TuFuncion.com
