4

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: http://jsfiddle.net/wmcmeans/mPGWx/7/

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

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
  • 1,432
  • 21
  • 27
  • Duplicate of http://stackoverflow.com/a/5746075 possibly – Rafe Mar 12 '13 at 18:23
  • 1
    My question is similar, but it's not a dupe. Mine involves google maps, not just border-radius styling. In my test case, adding "overflow: hidden" changed nothing. [Updated fiddle](http://jsfiddle.net/wmcmeans/mPGWx/9/) – Mac Mar 13 '13 at 03:56
  • Taking this further, I've created two fiddles using identical markup and styling; the one uses google maps API v2 and the other API v3. (I couldn't get both versions to work together on the same page.) Compare: [APIv2](http://jsfiddle.net/wmcmeans/Sj2dM/) to [APIv3](http://jsfiddle.net/wmcmeans/YHX6c/) – Mac Mar 13 '13 at 14:53

3 Answers3

3

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>

screenshot

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.

alxscms
  • 3,067
  • 6
  • 22
  • 43
  • I agree: I don't like adding a bunch of extra markup to something like this. Your solution doesn't seem to play well with a background image. If it did, I'd consider marking this as answered. – Mac Jan 28 '14 at 16:05
  • Yep.. this will only work with a fixed background color. If you ever find a solution, let us know here! – alxscms Jan 28 '14 at 17:52
1

This worked for me:

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
teradyl
  • 2,584
  • 1
  • 25
  • 34
0

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>
Mac
  • 1,432
  • 21
  • 27
  • I still got that problem. Even in the fiddle – Andi Jul 23 '14 at 13:51
  • Yes, I see that. In March 2014, when I closed this out, it was indeed "fixed." Now it's back to broken (in Chrome, not FF or IE). There is indeed no perfect browser yet. – Mac Nov 03 '14 at 17:28