How to customize Drawing control looks from google maps v3?

Question

I am using this code to let user draw circles or images

drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: null,
                drawingControlOptions: {
                    drawingModes: [google.maps.drawing.OverlayType.CIRCLE,          google.maps.drawing.OverlayType.RECTANGLE]
                },
                rectangleOptions: shapeOptions,
                circleOptions: shapeOptions,
                Options: shapeOptions,
                map: map
            });

the thing is I need to style those buttons,

How Can I Do so? I looked here but there are not mentions

I found this but this makes reference for adding new buttons, I want to style current ones

Although there may be ways, these ways would be more complicated than implementing own(custom) controls and possibly not stable(because the markup used for the built-in controls is not guaranteed to be stable) — Dr.Molle, Sep 15 '15 at 10:24
You can do it by changing the CSS. Please refer to the SO post answer http://stackoverflow.com/questions/12474604/is-it-possible-to-change-the-google-maps-drawing-manager-icons — AniV, Sep 15 '15 at 23:42

score 0 · Answer 1 · answered Aug 30 '17 at 10:31

       **You can add css styles for that particular button as below.** 
<style>
            div[title="Stop drawing"] {
                    content: url(https://cdn4.iconfinder.com/data/icons/whsr-january-flaticon-set/128/compass.png) !important;       
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }

                div[title="Draw a circle"] {
                    content: url(http://www.pngmart.com/files/4/Moon-PNG-Transparent.png) !important;
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }

                  div[title="Draw a rectangle"] {
                    content: url(https://www.shareicon.net/data/32x32/2015/07/04/64183_rectangle_256x256.png) !important;
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }
</style>

Thanks, I forgot about this question. I ended up creating custom buttons. But I don't think this is a very reliable solution because you'll need to add the rule for every language. And the texts might change in the future :O But thanks :) — Toni Michel Caubet, Aug 30 '17 at 11:20

score 0 · Answer 2 · answered Aug 09 '18 at 13:32

I know it's an old question but another aproach may be using a selector nth-child() based on the div wrapper which has a class 'gmnoprint'.

Title attributes on divs is not reliable because it changes by language.

Example:

div.gmnoprint div:nth-child(1)  {     
  height: 48px;
  width: 48px;
  cursor: pointer;
}

div.gmnoprint div:nth-child(2) {
  height: 48px;
  width: 48px;
  cursor: pointer;
}

div.gmnoprint div:nth-child(3) {
  height: 48px;
  width: 48px;
  cursor: pointer;
}

score 0 · Answer 3 · answered Mar 09 '21 at 17:02

0

Need to use button instead of div in the latest google maps api.

button[title="Stop drawing"] { 
  display: none !important; 
}

answered Mar 09 '21 at 17:02

Akshay Nimbal

1
1

1

Note that this does not answer the question also it's also assuming the user will be in english – Toni Michel Caubet Mar 10 '21 at 16:43

How to customize Drawing control looks from google maps v3?

3 Answers3