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.

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");
});