In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?

Question

I have two google maps. The first is created using the Google Maps API (v3) and contained in #map1. The second is displayed in an iframe using the suggested embed syntax fro

Answer 1

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.

Answer 2

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>

Answer 3

This worked for me:

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);