想googlemap上添加一个可拖拽的矩形框

想google地图上添加一个可拖拽的矩形框
刚刚将google地图显示在页面上，但是要在地图上实现一个可拖拽的矩形框，同时还得显示矩形的四个角的坐标。看了很多google map API 上得例子，没有合适的。望各位大侠，多多援手啊（本人刚刚接触google地图）、、、
[解决办法]

前段时间做的地图拉框查询，仅供参考
/*在地图上拖动鼠标画矩形方法
 * drawRectangleCallBack 为画矩形结束时回调函数
 * */
XMap.prototype.drawRectangle = function (drawRectangleCallBack){
 //取消拉框放大缩小事件
  this.cancelZoomExtEvent();
  if(this.getDrawObject()&&this.getDrawObject()['object']){
  this.getDrawObject()['object'].setMap(null);
  delete this.getDrawObject()['object'];
  }
  var xMap = this;
  var rectangle = null;
  xMap.map.draggable = false;
  var mapMouseDownEvent = google.maps.event.addListener(xMap.map, 'mousedown', function(event) {
  var centerPoint = event.latLng;
  var latLngBounds =  new google.maps.LatLngBounds(centerPoint,centerPoint);
   rectangle= new google.maps.Rectangle({
  bounds:latLngBounds,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  strokeColor:'#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  draggable: true,
  map:xMap.map});
    var  mapMouseMoveEvent = google.maps.event.addListener(xMap.map, 'mousemove', function(event1) {
  var latLngBoundsTemp =  new google.maps.LatLngBounds(centerPoint,event1.latLng);
  rectangle.setBounds(latLngBoundsTemp);
     });
    var circleMouseMoveEvent =  google.maps.event.addListener(rectangle, 'mousemove', function(event) {
  var latLngBoundsTemp =  new google.maps.LatLngBounds(centerPoint,event.latLng);
  rectangle.setBounds(latLngBoundsTemp);
     });
    var mapMouseUpEvent = google.maps.event.addListener(xMap.map, 'mouseup', function(event) {
   if(mapMouseDownEvent){
   google.maps.event.removeListener(mapMouseDownEvent);
   }
  if(mapMouseMoveEvent){
  google.maps.event.removeListener(mapMouseMoveEvent);
  }
  if(circleMouseMoveEvent){
  google.maps.event.removeListener(circleMouseMoveEvent);
  }
  if(mapMouseUpEvent){
  google.maps.event.removeListener(mapMouseUpEvent);
  }
  if(rectangleMouseUpEvent){
  google.maps.event.removeListener(rectangleMouseUpEvent);
  }
  //确保地图mouseup 和对象mouseup 只执行一次
  if(!xMap.map.draggable){
  xMap.map.draggable = true; 
 
  xMap.getDrawObject()['object'] = rectangle;
  if(drawRectangleCallBack){
   drawRectangleCallBack();
  }else{
  alert('回调函数为空，请传入回调函数');
  }
  }
  }); 
  var rectangleMouseUpEvent = google.maps.event.addListener(rectangle, 'mouseup', function(event) {
   if(mapMouseDownEvent){
   google.maps.event.removeListener(mapMouseDownEvent);
   }
  if(mapMouseMoveEvent){
  google.maps.event.removeListener(mapMouseMoveEvent);
  }
  if(circleMouseMoveEvent){
  google.maps.event.removeListener(circleMouseMoveEvent);
  }
  if(mapMouseUpEvent){
  google.maps.event.removeListener(mapMouseUpEvent);
  } 
  if(rectangleMouseUpEvent){
  google.maps.event.removeListener(rectangleMouseUpEvent);
  }
  //确保地图mouseup 和对象mouseup 只执行一次
  if(!xMap.map.draggable){
  xMap.map.draggable = true;
  xMap.getDrawObject()['object'] = rectangle;
  if(drawRectangleCallBack){
   drawRectangleCallBack();
  }else{
  alert('回调函数为空，请传入回调函数');
  }
  }
  });
   });
}