CODEWITHSUNDEEP
htmlioscssgoogle-maps
Martin Homola
Martin Homola

Reputation: 245

Google Maps overflow through box on iOS

I have problem with diplaying google map in circle on iOS systems. Map is overflowing box where it is included. It is a bug, or I do not know... Do you know some hack on that? Bug image.

My HTML code is pretty simple and looks like div.g-map>div.map where is rendered Google Map by JS.

CSS:

.map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* It has to be circle! */
.g-map {
  position: relative;
  width: 262px;
  height: 262px;
  border-radius: 50%;
  overflow: hidden;
}

Upvotes: 0

Views: 134

Answers (2)

Martin Homola
Martin Homola

Reputation: 245

SOLUTION:

Just add z-index: 10; to .map and in iOS browsers map will not overflow circle. 

.map {
  z-index: 10;
  ...
}

Upvotes: 0

Sergey Sklyar
Sergey Sklyar

Reputation: 1970

Try to avoid the use of absolute positioning if you can.
You still have an outer and inner blocks with same size.

Here is the fiddle, please try to open it in your browser:
https://jsfiddle.net/svitch/zb1fg48f/10/

And here is the code:

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru,
    disableDefaultUI: true
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
#map, #g-map {
  height: 262px;
  width: 262px;
}

/* It's a circle */
#g-map {
  border: none;
  border-radius: 50%;
  overflow: hidden;
}
<div id="g-map"><div id="map"></div></div>
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>

Upvotes: 1

Related Questions