Custom Drawing Control [Google Maps Library v3 Graphics Card]

Question

I am working with the Google Maps API Drawing Library, and I want to start marker drawing using a custom button.

I read this part of the documentation:

Hiding the drawing control causes the drawing control to not appear, but all the functionality of the DrawingManager class is still available. This way you can exercise your own control if you want. Removing the DrawingManager from the map object disables all drawing functions; it must be attached to the map using drawingManager.setMap (map) or a new DrawingManager if you need to restore the drawing functions.

But I can not learn how to use the DrawingManager for this.

Answer 1

when a button is pressed:

enable drawing marker: drawingManager.setDrawingMode (google.maps.drawing.OverlayType.MARKER);

turn off: drawingManager.setDrawingMode (zero);

Answer 2

You can:

• create a DrawingManager with no controls or with some controls omitted, then
• add custom buttons for them and then
• add handlers to these buttons to call the functions that @ user1226919 mentions.

Example:

var drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: false }); drawingManager.setMap(map); // drawingManager is now ready var marker_btn = document.createElement("button"); marker_btn.innerHTML = "Create Marker"; // add handlers marker_btn.addEventListener("click", (function () { // closure handles local toggle variables var toggled = false; var originalHTML = marker_btn.innerHTML; return function (e) { if (toggled) { drawingManager.setDrawingMode(null); e.target.innerHTML = originalHTML; } else { drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER); e.target.innerHTML = "Cancel"; } toggled = !toggled; } })()); // add button to map controls map.controls[ google.maps.ControlPosition.TOP_CENTER ].push( marker_btn ); 

Check out a working example with a custom polygon button: https://codepen.io/bozdoz/pen/jZNXNP?editors=0010