Mask the image/maps/div (circle) using css and jquery

Question

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;




}