I can't find good quality info on my problem online, so I came here. What I'm trying to do is add a custom button the Google Maps' DrawingManager's Controls.

The code to add the usual set of opitons is the following. But I can't figure out how to add one of my own buttons to drawingModes.

var drawingManager = new google.maps.drawing.DrawingManager({
        //drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.MARKER,
              google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,
              google.maps.drawing.OverlayType.POLYLINE,
              google.maps.drawing.OverlayType.RECTANGLE
              //how do I add my special little button here?
            ]
        }
    });
    drawingManager.setMap(map);

I can't find good quality info on my problem online, so I came here. What I'm trying to do is add a custom button the Google Maps' DrawingManager's Controls.

The code to add the usual set of opitons is the following. But I can't figure out how to add one of my own buttons to drawingModes.

var drawingManager = new google.maps.drawing.DrawingManager({
        //drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.MARKER,
              google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,
              google.maps.drawing.OverlayType.POLYLINE,
              google.maps.drawing.OverlayType.RECTANGLE
              //how do I add my special little button here?
            ]
        }
    });
    drawingManager.setMap(map);

• javascript
• google-maps-api-3

• I suspect you will need to make your own control, I don't think you can add buttons to the existing one. – geocodezip Commented Aug 13, 2015 at 12:36

1 Answer 1

You will need to create your own button. Here is how you can do:

// Create the DIV to hold the control and call the CustomControl() constructor passing in this DIV.
var customControlDiv = document.createElement('div');
var customControl = new CustomControl(customControlDiv, map);

customControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv);

function CustomControl(controlDiv, map) {

    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#ffff99';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '1px';
    controlUI.style.borderColor = '#ccc';
    controlUI.style.height = '23px';
    controlUI.style.marginTop = '5px';
    controlUI.style.marginLeft = '-6px';
    controlUI.style.paddingTop = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '10px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.style.marginTop = '-8px';
    controlText.innerHTML = 'Custom';
    controlUI.appendChild(controlText);

    // Setup the click event listeners
    google.maps.event.addDomListener(controlUI, 'click', function () {
        alert('Custom control clicked');
    });
}

This example kind of recreates the style that is applied on the default buttons. Probably not perfect, but you get the idea...

JSFiddle demo