google-maps-api-3 - marcar - iconos de google maps

¿Es posible cambiar los iconos del administrador de dibujos de Google Maps?

Question

Estoy buscando implementar una herramienta de selección de polígono de Google Maps para usar en múltiples dispositivos.

Los iconos predeterminados del Administrador de dibujos (la mano, la herramienta de dibujo del polígono) están bien en las máquinas de escritorio, pero son realmente difíciles de usar en dispositivos android. ¿Alguien puede decirme si es posible anular el conjunto de iconos predeterminado (http://maps.gstatic.com/mapfiles/drawing.png)

Supongo que podría anular css y html específicamente, pero me encantaría saber si hay una mejor manera antes de seguir ese camino.

Gracias por adelantado.

Answer 1

Esto es lo que utilizo para modificar los botones, debería darle un punto de partida, una vez que lo identifique por completo, cambiar el CSS es fácil.

$(".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'');  

});

Para modificarlo más, agrego mis propios botones a la barra de herramientas de esta manera:

$("#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>'');

Luego, para activar el nuevo botón y cambiar los iconos con el mouse, haga clic en:

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

¡Espero que esto ayude! :) Dennis