CODEWITHSUNDEEP
javascriptcssgoogle-maps-api-3
mayrs
mayrs

Reputation: 2387

Imitate Google Maps mapTypeControl Custom Control

Does anyone know how to exactly match the google maps mapTypeControl button style (concerning ui/css)? I found a nice tutorial but the buttons do not match the default google style. Is there an easy way to get exactly the current google maps button styles or do I have to manualy try to match the current styles (can be different in every new release which would be kind of a pain in the... you know what I mean).

Upvotes: 0

Views: 1260

Answers (1)

Tiborg
Tiborg

Reputation: 2305

A quick look into the Chrome Developer console reveals the following inline styles (there are no classes or id-s assigned to any of the buttons). Also notice that this element has an empty no-styler floating wrapper that also holds the button menu (the terrain button).

For the Map button:

direction: ltr; 
overflow: hidden; 
text-align: center; 
position: relative; 
color: rgb(0, 0, 0); 
font-family: Arial, sans-serif; 
-webkit-user-select: none; 
font-size: 13px; 
background-color: rgb(255, 255, 255); 
padding: 1px 6px; 
border: 1px solid rgb(113, 123, 135); 
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
font-weight: bold; min-width: 29px; 
background-position: initial initial; 
background-repeat: initial initial;

For the Satellite button the only style that differs is the font-weight

Upvotes: 5

Related Questions