JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdn.rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div id="holder">
  <div id="canvasholder">
    <canvas id="canvas"></canvas>
  </div>
  <div id="map-canvas"></div>
</div>

CSS

#holder {
  height: 700px;
  width: 700px;
  position: relative;
}

#canvasholder {
  height: 700px;
  width: 700px;
  position: absolute;
}

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

#map-canvas {
  position: absolute;
  height: 700px;
  width: 700px;
  z-index: -1;
}

#canvas {
  position: absolute;
  height: 700px;
  widht: 700px;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}

JavaScript

var map;
var canvas;

function initMap() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  MyOverlay.prototype = new google.maps.OverlayView();
  MyOverlay.prototype.onAdd = function() {}
  MyOverlay.prototype.onRemove = function() {}
  MyOverlay.prototype.draw = function() {}

  function MyOverlay(map) {
    this.setMap(map);
  }

  var overlay = new MyOverlay(map);
  var projection;

  // Wait for idle map
  google.maps.event.addListener(map, 'idle', function() {
    // Get projection
    projection = overlay.getProjection();
  })



  google.maps.event.addDomListener(document.getElementById("canvasholder").firstElementChild, "click", function(e) {
    console.log("click:" + e)
    google.maps.event.trigger(map, "click", e);
  });
  document.getElementById("canvasholder").addEventListener("click", getPosition, false);

  function getPosition(event) {
    var x = event.x;
    var y = event.y;

    var canvas = document.getElementById("canvas");

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

    console.log("x:" + x + " y:" + y);

    // propagate click to map
    var latLng = projection.fromContainerPixelToLatLng(new google.maps.Point(x, y));
    google.maps.event.trigger(map, 'click', {
      latLng: latLng
    });
  }
  google.maps.event.addListener(map, "click", function(e) {
    console.log("click:" + e.latLng);
    var marker = new google.maps.Marker({
      position: e.latLng,
      map: map,
      title: e.latLng.toUrlValue(6),
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    });
  });
  canvas = new fabric.Canvas("canvas");
  canvas.setHeight(700);
  canvas.setWidth(700);
  canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
  canvas.add(new fabric.Circle({
    radius: 30,
    fill:...