Mac Mac - 1 year ago 52
CSS Question

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

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 from Google and is contained in #map2.

Here's the fiddle:

Here are the snippets:

<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=";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>

Here's the issue: Google Maps created from the v3 API do not respect the borders of the container having border-radius styling applied, when viewed in a webkit-based browser. The iframed (embed) method does not show the same deficiency.

Tested good:

FireFox v 19.0.2 (Windows 7)

FireFox v 32.0.3 (Windows 8.1)

IE9 v 9.0.8112 (Windows 7)

IE11 (Windows 8.1)

Failed on:

Chrome v 25.0.1364.160 m / Safari (Win/32) v 5.0.3 / Opera v 11.64 (Windows 7)

Chrome v 38.0.2125.104 m (Windows 8.1)

Version 2 maps are deprecated and not an option. I'd like to style v3 maps with CSS only, no graphics or overlays. I'm looking for a workaround to the webkit rendering issue. (I've already opened a Chromium Issue #187187 for this that, almost a year later, has yet to be looked at).

Mac Mac
Answer Source

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>