How to enable and disable the drawingControlOptions in Google Maps?

Question

I am having three different buttons for drawing shapes. Clicking each button the exclusive drawing option should be enabled and also the other options should become disabled

Answer 1

Done it by the following code.

JavaScript Code

var rectangles  =   [];
var coordinates = [];
var polygons = [];
var map;
var drawingTool =   new google.maps.drawing.DrawingManager();
function initiateRectangle(){
    //Allowing to draw shapes in the Client Side
    if(drawingTool.getMap()) {
        drawingTool.setMap(null); // Used to disable the Rectangle tool
    }
    drawingTool.setOptions({
        drawingMode : google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl : true,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [google.maps.drawing.OverlayType.RECTANGLE]
        }
    });
    //Loading the drawn shape in the Map.
    drawingTool.setMap(map);
    google.maps.event.addListener(drawingTool,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.RECTANGLE) {
            drawRectangle(event.overlay.getBounds().getNorthEast().lat(),event.overlay.getBounds().getNorthEast().lng(),event.overlay.getBounds().getSouthWest().lat(),event.overlay.getBounds().getSouthWest().lng());
        }
    });
}

function initiateCircle() {
    //Allowing to draw shapes in the Client Side
    if(drawingTool.getMap()) {
        drawingTool.setMap(null); // Used to disable the Circle tool
    }
    drawingTool.setOptions({
        drawingMode : google.maps.drawing.OverlayType.CIRCLE,
        drawingControl : true,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [google.maps.drawing.OverlayType.CIRCLE]
        }
    });
        //Loading the drawn shape in the Map.
    drawingTool.setMap(map);

    google.maps.event.addListener(drawingTool,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.CIRCLE) {
            console.log("CIRCLE TRIGGERED");
        }
    });
}

function initiatePolygon() {
    //Allowing to draw shapes in the Client Side
    if(drawingTool.getMap()) {
        drawingTool.setMap(null); // Used to disable the Polygon tool
    }
    drawingTool.setOptions({
        drawingMode : google.maps.drawing.OverlayType.POLYGON,
        drawingControl : true,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [google.maps.drawing.OverlayType.POLYGON]
        }
    });
        //Loading the drawn shape in the Map.
    drawingTool.setMap(map);        

    google.maps.event.addListener(drawingTool,'polygoncomplete',function(polygon) {
            drawPolygon(polygon);
    });
}

function stopDrawing() {
    drawingTool.setMap(null);
}

function initialize()
{
    //Specifies the google Map properties
    map = new google.maps.Map(document.getElementById('map-canvas'), {zoom: 3, center: new google.maps.LatLng(0,0),mapTypeId: google.maps.MapTypeId.ROADMAP});  
}