JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="container">
    <div id="greymap"></div>
    <div id="colormap"></div>
   
</div>

CSS

#container{
    width: 400px;
    height: 300px;
    position:relative;
}
#greymap{
    width: 100%;
    height: 100%;

}

#colormap{
    width: 200px;
    height: 200px;
    position:absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
   border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-mask-image: url("http://paulitto.com/img/circleMask.png");
    -webkit-mask-size: 200px 200px;
    -webkit-mask-position: 0;
}
#colormap>div:nth-child(2){
    visibility:hidden;
}
#colormap .gmnoprint{
display:none;
}

JavaScript

var map;
function initialize() {
	var mapOptions = {
		zoom: 12,
		center: new google.maps.LatLng(50.981,  -114.11509999999998),
		styles: [
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#3b5998"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#3b5998"
            },
            {
                "saturation": -22
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#f7f7f7"
            },
            {
                "saturation": 10
            },
            {
                "lightness": 76
            }
        ]
    },
    {
        "featureType": "landscape.natural",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f7f7f7"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "color": "#8b9dc3"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "simplified"
            },
            {
                "color": "#3b5998"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#8b9dc3"
            }
        ]
    },
    {
        "featureType":...