CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Rob
Rob

Reputation: 11368

Google Maps API mousedown disabled when in drawing mode?

I have a google map with drawing overlays for rectangle, circle, polygon. Everything is cool but I want to clear the overlays before I start drawing a new one (automatically).

There doesn't seem to be any way to clear it via an existing Google Maps control and I don't want to create some custom button for it.

google.maps.event.addListener(this.map, 'mousedown', function(event) {
    console.log('map mousedown');
    console.log(_this.drawingManager.getDrawingMode());
});

I'm trying to clear the maps when a mousedown event occurs on the map. But it seems when the map is in "drawing mode" this event doesn't fire. I also can't find any documentation on any kind of mouse events for the drawing control.

Is there a way to fire a mousedown even when in drawing mode (drawing a circle, rectangle, polygon, etc) ?

Upvotes: 1

Views: 1074

Answers (1)

Matej P.
Matej P.

Reputation: 5383

There isn't a way to fire a mousedown event on map when in drawing mode I know of, but still I think there are two possible ways for you to go:

A. Only if you are using custom buttons for drawing manager (meaning you set drawingControl: false when initializing DrawingManager and create your own buttons). Then, when any drawing button was pressed, e.g. button for drawing a polyline, you can listen for the event which is fired when drawing was complete, and setDrawingMode to null which ensures that user will have to click one of the icons again to start drawing, where you can in the same click listener delete all existing drawings. For example (illustrational, depends on your setup):

$('#polylineButton').on('click', function(){
    //delete any previous existing drawings on map
    drawing_manager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
    google.maps.event.addListenerOnce(drawing_manager, 'overlaycomplete',function(polyline) { 
         drawing_manager.setDrawingMode(null); //set to hand cursor after overlay was drawn
         ..
    }
    ...
});

So this solution wouldn't require any additional buttons on the map, only those required to select respective drawing tools (hand, polyline, circle, etc.)

B. You cannot listen for the map click event, but you can still listen for a click event on the div containing the map. In that case you can, also with leveraging overlaycomplete event, set up some variables indicating when drawing started. Something similar to what was done in this answer .

Upvotes: 3

Related Questions