想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;