Google map border radius

1) The Google Maps v3 API ignores CSS borderRadius applied to the map container. 2) Maps using Google's suggested iframe (embed) method, respect the styling. Both maps render the same in: FireFox v 19.0.2 IE9 v 9.0.8112 Differences appear in: Chrome v 25.0.1364.160 m Safari (Win/32) v 5.0.3 Opera v 11.64 This appears to be a webkit browser issue.

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
		<div id="map1" class="gmap left top bling"></div>

		<iframe id="map2" class="gmap right top bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;q=augsburg+germany&amp;ie=UTF8&amp;hq=&amp;hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&amp;t=h&amp;ll=47.451123,10.862346&amp;spn=0.004981,0.00912&amp;z=18&amp;output=embed"></iframe>

		<div id="map3" class="gmap left bottom bling"></div>

		<p class="txt left"><b>API V3</b>: Any pointed corners indicate map tiles are overdrawing the container.</p>

		<p class="txt right"><b>IFRAME</b>: The map respects the border-radius styling of the parent iframe.</p>

		<p class="txt2 left"><b>NOMAP</b>: A DIV styled with border-radius having no map.</p>

CSS

.gmap {
			position: absolute;
			height: 425px;
			width: 550px;
			background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Abh%C3%B6ranlage_Gablingen.JPG/640px-Abh%C3%B6ranlage_Gablingen.JPG);
		}
		http://jsfiddle.net/wmcmeans/mPGWx/10/#fork.left { left: 20px; }
		.right {left: 600px; }
		.top { top: 30px; }
		.bottom { top: 500px; }
		.bling {
			overflow: hidden;
			border-radius: 20px;
			box-shadow: rgba(0, 0, 0, 0.55) 10px 20px 20px;
			border: 1px solid red;
		}
		.txt {
			position: absolute;
			top: 12px;
			width: 550px;
			font-size: 12px;
			font-family: Arial;
			text-align: center;
		}
		.txt2 {
			position: absolute;
			top: 482px;
			width: 550px;
			font-size: 12px;
			font-family: Arial;
			text-align: center;
		}

JavaScript

function initialize() {
    var myLatlng = new google.maps.LatLng(48.451123,10.862346);
    var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    
    var map = new google.maps.Map(document.getElementById("map1"), myOptions);
    
    var contentString = 
        '<div id="infowindow">' +
        '<b>AN/FLR-9 CDDA "Elephant Cage" Antenna</b><br />' +
        'Located  outside Gablingen, Germany, this receive-only<br>' +
        'antenna is used by the BND (German CIA). It was<br>' +
        'formerly operated by the US Army, 66th MI Brigade (USAFSA).' +
        '</div>'
    ;

    var infowindow = new google.maps.InfoWindow();
    
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'The Roundhouse'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
}

window.onload = function() {
    initialize();
};