Search code examples
htmlcssgoogle-mapsiframemobile-safari

Google Maps iframe no round border on mobile

I am including Google Map at my website like following: 

<div class="map">
<div class="mapoverlay" onclick="style.pointerEvents='none'"></div>
<iframe id="googlemap" width="199" height="199" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=KEY&zoom=14&language=nb&q=Linneaveien%2024C,1450+NESODDTANGEN"></iframe>
</div>

And I applying following CSS-rules:

.map { 
text-align: center; 
}

.mapoverlay{
background: transparent;
position: relative;
width: 100%;
height: 199px;
top: 199px;
margin-top: -199px;
}

.map iframe{
border: 1px transparent solid !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.60);
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.60);
opacity: 0;
opacity: 1 \9;
/*just in case ie*/
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

At this page you can see that the map is round like it should be. But when I check from my smartphone (iPhone) the map looks like this:

Screenshot from iPhone

Which rules can I apply that it also is round at smartphone?

Thanks in advance!

Solution

  • I just created the following sample and tested on iPhone/Safari and works as expected.

    HTML

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
     <div id="map">
        <iframe width="500" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.dk/?ie=UTF8&amp;t=m&amp;ll=55.677875,11.075935&amp;spn=0.048395,0.086002&amp;z=13&amp;output=embed"></iframe>
     </div>
  </body>
</html>

    CSS

    #map{
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    z-index: 99;
    height: 500px;
    width: 500px;
}

#map iframe {
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0;
    z-index: 50;
}