Is it possible to change the Google Maps Drawing manager icons?

Question

I'm looking to implement a Google Maps polygon select tool for use on multiple devices.

The default Drawing Manager icons (the hand, the polygon draw tool) are fine on desktop machines, but they are really fiddly to use on and android device. Can anyone tell me if it's possible to override the default icon set (http://maps.gstatic.com/mapfiles/drawing.png)

I suppose I could override css and html specifically, but would love to know if there is an better way before going down that path.

Thanks in advance.

Answer 1

This is what I use to modify the buttons, it should give you a starting point, once you ID everthing, changing the CSS is easy..

$(".gmnoprint").each(function(){
    var newObj = $(this).find("[title='Draw a circle']");
    newObj.parent().addClass("remove");

    // ID the toolbar
    newObj.parent().parent().attr("id", "btnBar");

    // Now remove the Circle button
    $(".remove").remove();

    // ID the Hand button
    newObj = $(this).find("[title='Stop drawing']");
    newObj.attr('id', 'btnStop');

    // ID the Marker button
    newObj = $(this).find("[title='Add a marker']");
    newObj.attr('id', 'btnMarker');

    // ID the line button
    newObj = $(this).find("[title='Draw a line']");
    newObj.attr('id', 'btnLine');

    // ID the Rectangle Button
    newObj = $(this).find("[title='Draw a rectangle']");
    newObj.attr('id', 'btnRectangle');

    // ID the Polygon button
    newObj = $(this).find("[title='Draw a shape']");
    newObj.attr('id', 'btnShape');  

});

To further modify it, I add my own buttons to the tool bar like this:

$("#btnBar").append('<div style="float: left; line-height: 0;"><div id="btnDelete" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(51, 51, 51); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 13px; background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 4px; border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: rgb(113, 123, 135) rgb(113, 123, 135) rgb(113, 123, 135) -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); font-weight: normal;" title="Delete Selected"><span style="display: inline-block;"><div style="width: 16px; height: 16px; overflow: hidden; position: relative;"><img style="position: absolute; left: 0px; top: -195px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 16px; height: 350px;" src="drawing.png" draggable="false"></div></span></div></div>');

Then, to activate the new button and change the icons on the mouse click:

google.maps.event.addDomListener(document.getElementById('btnDelete'), 'click', deleteSelectedShape);
            google.maps.event.addDomListener(document.getElementById('btnDelete'), 'mousedown', function () {
    $("#btnDelete img").css("top", "-212px");
});
            google.maps.event.addDomListener(document.getElementById('btnDelete'), 'mouseup', function () {
    $("#btnDelete img").css("top", "-195px");
});

Hope this helps! :) Dennis

Answer 2

this is the CSS code I used to override the styles on the buttons.

In my case the HTML for the icons looks like this

<div class="gmnoprint" style="margin: 5px; z-index: 10; position: absolute; top: 0px; left: 310px;">
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Parar de desenhar" aria-label="Parar de desenhar" aria-pressed="true" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; font-weight: 500;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -144px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Desenhar uma forma" aria-label="Desenhar uma forma" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -64px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Desenhar um círculo" aria-label="Desenhar um círculo" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -160px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Desenhar um retângulo" aria-label="Desenhar um retângulo" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -16px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
</div>

CSS styles applied

.gmnoprint > div > div[role=button] {
    width: 44px;
    height: 44px;
    vertical-align: middle;
    line-height: 40px;
    text-align: center;
}

.gmnoprint > div > div[role=button] > span > div > img {
    display: none;
}

.gmnoprint > div > div[role=button] > span > div:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f007";
    font-size: 22px;
}