JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
 <p>Based on Google example <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html">http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html</a>. Clicks on the overlay passes through to map and closes the infowindow immediately after opening. How can this be prevented?
 </p>
 <div id="map" style="width: 320px; height: 480px;">map div</div>
  <div>
      <input type="button" value="Add Marker" onclick="addOverlay()">
      <input type="button" value="Remove Marker" onclick="removeOverlay()">
  </div>
  <ol id="logging">
  
  </ol>

JavaScript

function CustomMarker(latlng,  map) {
    this.latlng_ = latlng;

    // Once the LatLng and text are set, add the overlay to the map.  This will
    // trigger a call to panes_changed which should in turn call draw.
    this.setMap(map);
  }

  CustomMarker.prototype = new google.maps.OverlayView();

  CustomMarker.prototype.draw = function() {
    var me = this;

    // Check if the div has been created.
    var div = this.div_;
    if (!div) {
      // Create a overlay text DIV
      div = this.div_ = document.createElement('DIV');
      // Create the DIV representing our CustomMarker
      div.style.border = "none";
      div.style.position = "absolute";
      div.style.paddingLeft = "0px";
      div.style.cursor = 'pointer';
      div.className = 'cmOverlay';

      var img = document.createElement("img");
      img.src = "https://www.obayashi.co.jp/chronicle/img/mapfiles/markers/circular/bluecirclemarker.png";
      div.appendChild(img);
      google.maps.event.addDomListener(div, "click", function(event) {
        google.maps.event.trigger(me, "click");
      });

      // Then add the overlay to the DOM
      var panes = this.getPanes();
      panes.overlayMouseTarget.appendChild(div);
    }

    // Position the overlay 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (point) {
      div.style.left = point.x + 'px';
      div.style.top = point.y + 'px';
    }
  };

  CustomMarker.prototype.remove = function() {
    // Check if the overlay was on the map and needs to be removed.
    if (this.div_) {
      this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
    }
  };

  CustomMarker.prototype.getPosition = function() {
   return this.latlng_;
  };

  var map;
  var overlay;
  function initialize() {
    var opts = {
      zoom: 9,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), opts);

 ...