CODEWITHSUNDEEP
google-maps-api-3
Mona Coder
Mona Coder

Reputation: 6316

Not Able to Stop/End Drawing Mode Automatically After One Draw On Map Using Custom Button

I am using following code and Demo to add a Rectangle drawing to the Map using a custom button (Not Google Maps Built In Drawing Toolbar) which is adding the shape but is not stopping/ending the drawing mode Automatically after finishing the draw.

I tried adding 

google.maps.event.addListener(map.drawingManager, "overlaycomplete", function(event){                   
    map.drawingManager.setDrawingMode(null);
});

but still not stopping the drawing mode

<button onclick="drawRec();">Draw Rectangle</button>

var drawingManager = new google.maps.drawing.DrawingManager();
function drawRec() {
    drawingManager.setOptions({
        drawingMode : google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl : false,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [ google.maps.drawing.OverlayType.RECTANGLE ]
        },
        rectangleOptions : {
            strokeColor : '#6c6c6c',
            strokeWeight : 3.5,
            fillColor : '#926239',
            fillOpacity : 0.6,
            editable: true,
          draggable: true
        }   
});
drawingManager.setMap(map);

}
google.maps.event.addListener(map.drawingManager, "overlaycomplete", function(event){                   
    map.drawingManager.setDrawingMode(null);
});  
google.maps.event.addDomListener(window, 'load');

Upvotes: 0

Views: 328

Answers (1)

geocodezip
geocodezip

Reputation: 161324

duplicate of question: Issue on Stopping Drawing Mode As Soon As Releasing A Shape On The Map, you just need to check and see if the rectangle already exists before starting a new one:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
  // keep reference to the overlay
  rectangle = overlay;
  drawingManager.setOptions({
    drawingMode: null,
    drawingControl: false
  });
});

Then in drawRec, check to see if it already exists or not, and if it does either remove it from the map or prevent the code from drawing another one.

function drawRec() {
  //Setting options for the Drawing Tool. In our case, enabling Polygon shape.
  if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
    rectangle.overlay.setMap(null);
  }

proof of concept fiddle

code snippet:

var rectangle;
var map;
var drawingManager;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 44.5452,
      lng: -78.5389
    },
    zoom: 9
  });
  drawingManager = new google.maps.drawing.DrawingManager();
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
    rectangle = overlay;
    drawingManager.setOptions({
      drawingMode: null,
      drawingControl: false
    });
  });
}
google.maps.event.addDomListener(window, 'load', initMap);


function drawRec() {
  //Setting options for the Drawing Tool. In our case, enabling Polygon shape.
  if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
    rectangle.overlay.setMap(null);
  }
  drawingManager.setOptions({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: {
      strokeColor: '#6c6c6c',
      strokeWeight: 3.5,
      fillColor: '#926239',
      fillOpacity: 0.6,
      editable: true,
      draggable: true
    }

  });
  drawingManager.setMap(map);

}
html,
body,
#map {
  height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Upvotes: 1

Related Questions