Selección de cuadro/rectángulo en Google Maps

Question

Estoy trabajando en Google Maps y quiero implementar una característica donde un usuario puede dibujar un cuadro/rectángulo usando su mouse para seleccionar una región en el mapa (como seleccionar varios archivos en Windows) Tras la selección, quiero obtener todos los marcadores que caen en la región. He estado buscando tanto la API de Google Maps como la búsqueda, pero no puedo encontrar una solución. Intenté usar jQuery seleccionable para la selección, pero todo lo que devuelve es un conjunto de divisiones desde las que no puedo determinar si se selecciona o no un marcador.

Answer 1

Encontré un Library keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) y lo usé para dibujar un rectángulo en la página.

Más tarde, edito la biblioteca y la detuve para hacer zoom en el área seleccionada y en su lugar hice que devuelva las coordenadas correctas en el evento 'dragend'. Luego hice un bucle manual a través de todos los marcadores en el mapa para encontrar los marcadores que están dentro de esa región en particular. La biblioteca no me daba las coordenadas adecuadas para los siguientes cambios.

Un cambio en la función DragZoom a

var prj = null; 
    function DragZoom(map, opt_zoomOpts) { 
     var ov = new google.maps.OverlayView(); 

     var me = this; 
     ov.onAdd = function() { 
      me.init_(map, opt_zoomOpts); 
     }; 
     ov.draw = function() { 
     }; 
     ov.onRemove = function() { 
     }; 
     ov.setMap(map); 
     this.prjov_ = ov; 
     google.maps.event.addListener(map, 'idle', function() { 
      prj = ov.getProjection(); 
     }); 
    } 

y DragZoom.prototype.onMouseUp_ función para

DragZoom.prototype.onMouseUp_ = function (e) { 
    this.mouseDown_ = false; 
    if (this.dragging_) { 
     var left = Math.min(this.startPt_.x, this.endPt_.x); 
     var top = Math.min(this.startPt_.y, this.endPt_.y); 
     var width = Math.abs(this.startPt_.x - this.endPt_.x); 
     var height = Math.abs(this.startPt_.y - this.endPt_.y); 
     var points={ 
     top: top, 
     left: left, 
     bottom: top + height, 
     right: left + width 
     }; 
     var prj = this.prjov_.getProjection(); 
     // 2009-05-29: since V3 does not have fromContainerPixel, 
     //needs find offset here 
     var containerPos = getElementPosition(this.map_.getDiv()); 
     var mapPanePos = getElementPosition(this.prjov_.getPanes().mapPane); 
     left = left + (containerPos.left - mapPanePos.left); 
     top = top + (containerPos.top - mapPanePos.top); 
     var sw = prj.fromDivPixelToLatLng(new google.maps.Point(left, top + height)); 
     var ne = prj.fromDivPixelToLatLng(new google.maps.Point(left + width, top)); 
     var bnds = new google.maps.LatLngBounds(sw, ne); 
     //this.map_.fitBounds(bnds); 
     this.dragging_ = false; 
     this.boxDiv_.style.display = 'none'; 
     /** 
     * This event is fired when the drag operation ends. 
     * Note that the event is not fired if the hot key is released before the drag operation ends. 
     * @name DragZoom#dragend 
     * @param {GLatLngBounds} newBounds 
     * @event 
     */ 

     google.maps.event.trigger(this, 'dragend', points); 
    } 
    };