JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div id="map"></div>

CSS

html,body,#map {
    width: 100%; 
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

var options = {
  zoom: 8,
  center: new google.maps.LatLng(48,20),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var mapDiv = document.getElementById("map");
var w = mapDiv.offsetWidth;
var h = mapDiv.offsetHeight;

var map = new google.maps.Map(mapDiv,options);

var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
canvas.style.pointerEvents = "none";

map.controls[google.maps.ControlPosition.TOP_CENTER].push(canvas);
		
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0,0,0,.3)";
context.fillRect(Math.floor(w/2)-200,Math.floor(h/2)-200,400,400);
context.fillRect(0,0,100,100);
context.fillRect(w-100,0,100,100);
context.fillRect(0,h-100,100,100);
context.fillRect(w-100,h-100,100,100);