google-mapsgoogle-maps-api-3

Box/Rectangle Draw Selection in Google Maps


I am working on Google Maps and want to implement a feature where a user can draw a box/rectangle using his/her mouse to select a region on map (like selecting multiple files in windows). Upon selection, I want to get all the markers that fall in the region. I have been looking around both Google Maps api and search but I am unable to find a solution. I tried using jQuery Selectable for selection but all it returns is a bunch of divs from which I am unable to determine if any marker is selected or not.


Solution

  • I found a Library keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) and used it to draw a rectangle on the page.

    Later, I edit the library and stopped it from zooming the selected area and instead made it return the correct co-ordinates in 'dragend' event. Then I manually looped through all the marker on the map to find the markers that are within that particular region. The library was not giving me the proper co-ordinates to I made the following changes.

    Changed the DragZoom function to

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

    and DragZoom.prototype.onMouseUp_ function to

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