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 bling"></div>

<iframe id="map2" class="gmap right 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=48.451123,10.862346&amp;spn=0.004981,0.00912&amp;z=16&amp;output=embed"></iframe>

<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>

CSS

.gmap {
    position: absolute;
    height: 425px;
    width: 550px;
    top: 30px;
}
.left { left: 20px; }
.right {left: 600px; }
.bling {
    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;
}

JavaScript

function initialize() {
    var myLatlng = new google.maps.LatLng(48.451123,10.862346);
    var myOptions = {
      zoom: 18,
      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 antenna<br>' +
        'is used by the BND (German CIA). It was formerly operated<br>' +
        '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'
    }).setAnimation(google.maps.Animation.BOUNCE);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
}

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