JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://jsclipper.sourceforge.net/6.1.3.1_fpoint/clipper.js"></script>
<div id="map"></div>
<div id="svgcontainer"></div>

CSS

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

#map {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
#svgcontainer {
    position: absolute;
    top:50%;
    margin-left:-70px;
    margin-top:-60px;
    left:50%;
    z-index: 2;
}

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: new google.maps.LatLng(42.693413, 23.322601),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: false,
    draggable: false,
    scrollwheel: false,
    disableDoubleClickZoom: true
});

var subj_paths = [[{X:0,Y:10},{X:150,Y:10},{X:150,Y:110},{X:0,Y:110}]]; 
var clip_paths = [[{X:50,Y:50},{X:200,Y:50},{X:200,Y:150},{X:50,Y:150}]];

var cpr = new ClipperLib.Clipper();

var scale = 100;
ClipperLib.JS.ScaleUpPaths(subj_paths, scale);
ClipperLib.JS.ScaleUpPaths(clip_paths, scale);

cpr.AddPaths(subj_paths, ClipperLib.PolyType.ptSubject, true);  // true means closed path
cpr.AddPaths(clip_paths, ClipperLib.PolyType.ptClip, true);

var solution_paths = new ClipperLib.Paths();
var succeeded = cpr.Execute(ClipperLib.ClipType.ctUnion, solution_paths, ClipperLib.PolyFillType.pftNonZero, ClipperLib.PolyFillType.pftNonZero);

// console.log(JSON.stringify(solution_paths));

// Scale down coordinates and draw ...
var svg = '<svg style="background-color:transparent" width="200" height="160">';
svg += '<path fill="green" fill-opacity="0.5" stroke-width="0" d="' + paths2string(solution_paths, scale) + '"/>';
svg += '</svg>';
document.getElementById("svgcontainer").innerHTML = svg;

// Converts Paths to SVG path string
// and scales down the coordinates
function paths2string (paths, scale) {
  var svgpath = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < paths.length; i++) {
    for(j = 0; j < paths[i].length; j++){
      if (!j) svgpath += "M";
      else svgpath += "L";
      svgpath += (paths[i][j].X / scale) + ", " + (paths[i][j].Y / scale);
    }
    svgpath += "Z";
  }
  if (svgpath=="") svgpath = "M0,0";
  return svgpath;
}
var paths = [[{"X":10,"Y":10},{"X":110,"Y":10},{"X":110,"Y":110},{"X":10,"Y":110}]];
console.log(JSON.stringify(paths));
ClipperLib.Clipper.ReversePaths(paths);
console.log(JSON.stringify(paths));