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

Reputation: 6316

Stopping drawing mode as soon as releasing a shape on the map

I am working on this demo. How I can force the Google Map to quit the drawing mode when the drawing of first object is done?

As you can see in the demo the drawing mode stay on by each of selected type until user clicks on "Stop Drawing" control but I need to update this to auto detected format.

Here is the code I have:

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var drawingStyle = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true,
        draggable: true
    };
    var drawingManager = new google.maps.drawing.DrawingManager({

        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.RECTANGLE]
        },
        rectangleOptions: drawingStyle,
        polygonOptions: drawingStyle,
        circleOptions: drawingStyle
    });
    drawingManager.setMap(map);

Upvotes: 0

Views: 1471

Answers (1)

geocodezip
geocodezip

Reputation: 161324

The documentation states that these events exist on the DrawingManager:

  • circlecomplete | Circle | This event is fired when the user has finished drawing a circle.
  • markercomplete | Marker | This event is fired when the user has finished drawing a marker.
  • overlaycomplete | OverlayCompleteEvent | This event is fired when the user has finished drawing an overlay of any type.
  • polygoncomplete | Polygon | This event is fired when the user has finished drawing a polygon.
  • polylinecomplete | Polyline | This event is fired when the user has finished drawing a polyline.
  • rectanglecomplete | Rectangle | This event is fired when the user has finished drawing a rectangle.

If you want to do something when they occur, add a listener for them:

google.maps.event.addListener(drawingManager,'overlaycomplete',function() {
    drawingManager.setOptions({drawingMode: null, drawingControl: false});
});

proof of concept fiddle

code snippet:

function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: {
      lat: 45,
      lng: -85
    },
    zoom: 5
  });

  var drawingStyle = {
    strokeWeight: 0,
    fillOpacity: 0.45,
    editable: true,
    draggable: true
  };
  var drawingManager = new google.maps.drawing.DrawingManager({

    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    rectangleOptions: drawingStyle,
    polygonOptions: drawingStyle,
    circleOptions: drawingStyle
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function() {
    drawingManager.setOptions({
      drawingMode: null,
      drawingControl: false
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}
<script src="http://maps.google.com/maps/api/js?libraries=places,drawing"></script>
<div id="map_canvas" style="margin: 0.6em;"></div>

Upvotes: 1

Related Questions