Drawing a circle using drag events....

google.maps.event.addDomListener(controlUI,'click',function(event){

            google.maps.event.addListenerOnce(map,'click',function(event){
                center=event.latLng;
                console.log('have just set center of the circle dynamically');
            });
            //Dragging the map does not work so what is it that we can drag to create the circle
            google.maps.event.addListenerOnce(map,'dragstart',function(event){
                console.log('user has started dragging on the map');
            });
            google.maps.event.addListenerOnce(map,'dragend',function(event)
            {
                var point=event.latLng;
                //compute distance between goes here...
                radius=google.maps.geometry.spherical.computeDistanceBetween(point,center);
                console.log('finished computing the radius');
                var circe=new configureCircle('#FF0000',2,0.8,'#FF0000',0.35);
                circe.setMap(map);
                circe.setCenter(map.center);
                circe.setRadius(radius);
                circe.setEditable(true);
                circe.setDraggable(true);
                var circle=new google.maps.Circle(circe);
            });
How to implement drag to draw a circle...