In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
Here is the solution : http://jsfiddle.net/alxscms/3Kv99/
I am using several extra markups to achieve this, which I don't like so much but was the only possible way to me.
<div class="wrapper"> <div class="map" id="map"></div> <i class="top"></i> <i class="right"></i> <i class="bottom"></i> <i class="left"></i> <i class="top left"></i> <i class="top right"></i> <i class="bottom left"></i> <i class="bottom right"></i></div>
My goal was to have a inner border and rounded corners, but you can set the border thickness to 0 and you will have just the rounded corners on the map. This works on FF, Chrome and IE. I haven't tested on Opera or Safari.
This worked for me:
-webkit-transform: translate3d(0px, 0px, 0px);-webkit-mask-image: -webkit-radial-gradient(white, black);
This appears to be fixed, so it's no longer an issue. You can verify that a map container's border-radius style is indeed respected, using the v3 map API, at this fiddle.
<div id="map3" class="gmap"></div>