Objective:
to mask the google maps using a translucent mask and clearly visible inside the circle only.
Demo
image here
In the Image attached i want to invert the background as the maps should be translucent outside the circle and completely visible inside the circle
some of snippets of my HTML
HTML
<div id = "blur" class="blurit">
<div id="map-canvas" > </div>
</div>
<div id="wrapper" class="circlewrapper">
</div>
So i have a parent div(blur) and child div(map-canvas) there is another div which draws circle( wrapper) .CSS
#map-canvas{
position: absolute;
width: 100%;
height: 100%;
background-color:grey;
border solid green 3px;
}
.circlewrapper{
width: 50px;
height: 50px;
border-radius: 50%;
background:rgba(0,0,0,0.8);
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
overflow:hidden;
border:solid 4px red;
}