Custom Drawing Control [Google Maps v3 Drawing Library]

Question

I'm working with the Drawing Library of the Google Maps API and i want to trigger the drawing of a marker with a custom button.

I've read this part of the documentation :

Hiding the drawing control causes the drawing tools control to not display, but all of the functionality of the DrawingManager class is still available. In this way, you can implement your own control, if desired. Removing the DrawingManager from the map object disables all drawing functionality; it must be reattached to the map with drawingManager.setMap(map), or a new DrawingManager object constructed, if drawing features are to be restored.

But i cannot find out how to use the DrawingManager to do this.

Genus

Answer 1

on button click:

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

turn off: drawingManager.setDrawingMode(null);

Bibelot

Same applies to, OverlayType.CIRCLE, OverlayType.POLYGON – Backer

Answer 2

You can:

1. create a DrawingManager without controls, or with certain controls omitted, then
2. add custom buttons for them, and then
3. add handlers to those buttons to trigger 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

Fluctuate

I like this answer because of very well working fiddle – Millennium

Note .setDrawingModer(null) will set the cursor to the little hand, with which you can select drawn objects and move the map. – Atonsah