JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<svg width="100%" height="100%" version="1.1"
  xmlns="http://www.w3.org/2000/svg" fill="#ffffff" pointer-events="none">
  <defs>
      <radialGradient id="Gradient"
            cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
        <stop offset="50%" stop-color="#ffffff" stop-opacity="0"/>
        <stop offset="99%" stop-color="#ffffff" stop-opacity="1"/>
      </radialGradient>
      <mask id="mask4" x="0" y="0" width="200" height="200" >
        <rect x="0" y="0"  width="100%" height="100%"
            style="stroke:none; fill: url(#Gradient)"/>
    </mask>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="459">
        <image xlink:href="http://design-warez.ru/uploads/posts/2009-04/1239891108_1238678481_8.jpg" x="0" y="0" width="500" height="459" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%"
        style="pointer-events: none; fill:url(#img1); mask: url(#mask4)"/>
</svg>

CSS

html, body { height: 100%; margin: 0; }

body { background: url(http://design-warez.ru/uploads/posts/2009-04/1239891108_1238678481_8.jpg); }

#map_canvas {
    width: 500px;
    height: 500px;
    margin: 5px;
}
svg { 
    vertical-align: top;
    top: 0;
    left: 0;
    width: 510px;
    height: 510px;
    position: absolute;
    pointer-events: none;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0)
}

JavaScript

function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

initialize();