JSFiddle - React, Tailwind, and code Playground

by Pavlo

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 greyMap,colorMap;
                var center = new google.maps.LatLng(47.85,35.2);
                function initGreyMap() {
                    var mapStyles =[
                        {
                            "featureType": "all",
                            "elementType": "geometry.fill",
                            "stylers": [
                            { "saturation": -100 },
                            ]
                        }
                        ];
					var mapOptions = {
						center: center,
						zoom: 10,
						mapTypeId: 'greymap'
					};
					greyMap = new google.maps.Map(document.getElementById("greymap"),
						mapOptions);
					
                    var newMapType = new google.maps.StyledMapType(mapStyles, {name: "Grey Map"});
                    greyMap.mapTypes.set('greymap', newMapType);

				}
                function initColorMap() {
                    var mapStyles =[
                        {
                            "featureType": "all",
                            "elementType": "geometry.fill",
                            "stylers": [
                            { "saturation": 50 },
                            ]
                        }
                        ];
					var mapOptions = {
						center: center,
						zoom: 10,
						mapTypeId: 'colormap',
                        panControl: false,
                        mapTypeControl: false,
                        zoomControl: false,
                         streetViewControl: false
					};
					colorMap = new google.maps.Map(document.getElementById("colormap"),
						mapOptions);
					
                    var newMapType = new google.maps.StyledMapType(mapStyles, {name: "Color Map"});
                    colorMap.mapTypes.set('colormap', newMapType);

				}
                initGreyMap(); 
                initColorMap();
                var marker = new google.maps.Marker({map: colorMap, position: center});
				
                //synchronize map events
              ...