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. In this fiddle, we see the soon-to-be-terminated API v2 initially respects the container's borders.

by wmcmeans

HTML

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyDhxjuymtOIPq4KFy3TWjsm_2AdY2KUYjQ&amp;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=48.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 V2</b>: Deprecated API initially shows map tiles masked by container's borders.</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);
		}
		.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() {
   map = new GMap2( document.getElementById( "map1" ));
				map.setMapType(G_SATELLITE_MAP);
				topLeft = new GControlPosition( G_ANCHOR_TOP_LEFT, new GSize( 20, 20 ));
				map.addControl( new GSmallMapControl(), topLeft );

				topRight = new GControlPosition( G_ANCHOR_TOP_RIGHT, new GSize( 10, 10 ));
				map.addControl( new GMapTypeControl(), topRight );

				map.setCenter( new GLatLng( 48.451123,10.862346 ), 18 );
}

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