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

3
  • Duplicate of stackoverflow.com/a/5746075 possibly
    – Rafe
    Mar 12, 2013 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
    – Mac
    Mar 13, 2013 at 3: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 to APIv3
    – Mac
    Mar 13, 2013 at 14:53

3 Answers 3

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.

2
  • 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, 2014 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, 2014 at 17:52
1

This worked for me:

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
0
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>
2
  • I still got that problem. Even in the fiddle
    – Andi
    Jul 23, 2014 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 3, 2014 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.