javascriptgoogle-mapsgoogle-maps-drawing

How can I have vertical drawing tool controls


I looked in the positioning docs and googled and don't see anything about it. This looks ridiculous tho even when their own controls are vertical. Is this possible?

enter image description here


Solution

  • So far, and this isn't pretty, but the only way to get it aligned correctly and vertical was doing this hackage:

    $('[title="Draw a rectangle"], [title="Stop drawing"]')
    .last().css({marginBottom: '20px', marginLeft: '1px'})
    .end().parent().css({
        float: 'none',
        marginLeft: '5px'
    });
    

    You'd need to add the title for each button you add to your controls too

    UPDATE

    The above worked fine for a bit but as I needed to add more buttons and have more control it became super hard. I ended up just building a "toolbar component" that didn't use any Google Maps code except to trigger the tool changes on click (just drawingManagerInstance.setDrawingMode('whatever')). This ended up taking me less time then figuring out how to alter theirs and it's so much easier to work with.