How to enable and disable the drawingControlOptions in Google Maps?

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. My code is following.

drawShape.js File

The following is my Javascript code. I am having three separate methods to draw shapes(circle, rectangle, polygon). By the below code, by each click I am getting new drawing controller. Please me to correct it.

google.maps.visualRefresh = true;
var rectangles  =   [];
var coordinates = [];
var polygons = [];
var map;

function initiateRectangle(){
    //Allowing to draw shapes in the Client Side
    var drawRectangleTool = new google.maps.drawing.DrawingManager({
        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.
    drawRectangleTool.setMap(map);

    google.maps.event.addListener(drawRectangleTool,'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
    var drawingManager = new google.maps.drawing.DrawingManager({
        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.
    drawingManager.setMap(map);

    google.maps.event.addListener(drawRectangle,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.CIRCLE) {
            console.log("Circle Working PERFECTLY");
        }
    });
}

function initiatePolygon() {
    //Allowing to draw shapes in the Client Side
    var drawingManager = new google.maps.drawing.DrawingManager({
        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.
    drawingManager.setMap(map);

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

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});
    //
}
//
function displayInfo(conString,customPosition) {
    var infoWindow =    new google.maps.InfoWindow({
        content : conString,
        position : customPosition
    });
    infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

index.xhtml FILE :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title> REGION LOOKUP SYSTEM </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing,geometry&amp;sensor=false"></script>
</h:head>
<h:body>
    <div class="container-fluid">
        <h3 class="text-center breadcrumb custom-color"> GeoCodeLookUpSystem </h3>
        <div class="row-fluid">
            <div class="span3 leftpanel custom-color">
                <h:commandButton styleClass="buttonStyle" value="Draw Rectangle" onclick="initiateRectangle()"></h:commandButton>
                <h:commandButton styleClass="buttonStyle" value="Draw Polygon" onclick="initiatePolygon()"></h:commandButton>
                <h:commandButton styleClass="buttonStyle" value="Draw Circle" onclick="initiateCircle()"></h:commandButton>
                <h:commandButton styleClass="buttonStyle" value="Delete Shapes"></h:commandButton>
            </div>
            <div id="map-canvas" class="span9"></div>
        </div>
    </div>
    <h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
    <h:outputStylesheet library="css" name="customClass.css"></h:outputStylesheet>
    <h:outputStylesheet library="css" name="primefacesoverride.css"></h:outputStylesheet>
    <h:outputScript library="js" name="drawShape.js"></h:outputScript>
</h:body> 
</html>

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

来源：https://stackoverflow.com/questions/20852361/how-to-enable-and-disable-the-drawingcontroloptions-in-google-maps

标签

google-maps

google-maps-api-3

google-maps-markers