I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle:
However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Opera, Safari, and IE.
The HTML code is as follows:
<div id="wrapp">
<div id="mask">
<div id="anyotherID"></div>
</div>
</div>
Here is the JavaScript code snippet:
window.onload=function(){
var myLatlngDist = new google.maps.LatLng(-32.242741,-60.161446);
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
var mapOptionsDist = {
zoom: 4,
center: myLatlngDist,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
mapDist = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist);
}
And here is the CSS code snippet:
#anyotherID{
height:427px;
width:428px;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
overflow: hidden;
}
#mask {
border-radius: 1000px;
-moz-border-radius: 1000px;
-webkit-border-radius: 1000px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Any assistance on resolving this issue in Chrome would be greatly appreciated!