Can I change the drawing manager icons of Google Maps?

Question

I am looking for a tool to select the Google Maps polygon for use on multiple devices.

The default Drawing Manager icons (hand, a tool for drawing polygons) are great for desktop computers, but they are really inconvenient to use on an android device. Can someone tell me if it is possible to override the default icon set (http://maps.gstatic.com/mapfiles/drawing.png)

I suppose I could override css and html on purpose, but would like to know if there is a better way before going this route.

Thanks in advance.

Answer 1

This is what I use to change buttons, it should give you a starting point when you ever make sure changing 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 change it, I will add my own buttons to the toolbar, for example:

 $("#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 with 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