JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4"></script>
<div id="map"></div>

<div id="markers">
  <div id="m1" class="drag" style="left:0; background-image: url('https://maps.gstatic.com/mapfiles/ms/icons/ltblue-dot.png')">
  </div>
</div>

CSS

body,
html {
  height: 100%;
  width: 100%;
}

#map {
  float: left;
  margin: 0 25px 10px 14px;
  width: 64%;
  height: 70%;
}

#desc {
  float: left;
  margin: 0 25px 10px 20px;
  width: 10em;
}

#alloc {
  position: absolute;
  top: 160px;
  left: 70.4%;
  width: 200px;
  height: 110px;
}

#markers {
  position: absolute;
  top: 230px;
  left: 70.4%;
  width: 200px;
  height: 110px;
}

.drag {
  position: absolute;
  width: 32px;
  height: 32px;
}

.infowindow {
  margin-top: 20px;
  width: 180px;
  height: 60px;
}

@media screen and (max-width: 1000px) {
  body,
  html,
  #map {
    margin: 0;
  }
  #map {
    width: 100%;
    height: 52%;
    margin-top: -10px;
  }
  h3 {
    margin-top: 0;
    margin-left: 7px;
  }
  #desc {
    position: absolute;
    bottom: 2px;
    left: 10px;
    width: 87%;
  }
  .include >b {
    float: right;
    margin-top: 17px;
  }
  #alloc {
    position: absolute;
    top: 70%;
    left: 18%;
    width: 140px;
    height: 60px;
    /* border: 1px solid red; */
  }
  #markers {
    position: absolute;
    top: 70%;
    left: 60%;
    width: 200px;
    height: 50px;
    /*  border: 1px solid blue; */
  }
  #markers > p {
    margin-top: 0;
    font-size: 80%;
  }
  .infowindow {
    margin-top: 10px;
    width: 150px;
    height: 25px;
  }
}

@media screen and (orientation: portrait) {
  #alloc {
    left: 3%;
  }
  #markers {
    left: 46%;
  }
}

JavaScript

var map, iw, drag_area, actual, obj;
var dummy, z_index = 0;

function DummyOView() {
  this.setMap(map);
  this.draw = function() {}
}

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


//Used to replace the marker
//once we have moved it from its div
function fillMarker(a) {
  var div = document.createElement("div");
  div.style.backgroundImage = "url(" + a + ")";
  var padding;
  if (obj.id == "m1") {
    padding = "0px"
  }
  div.style.left = padding;
  div.id = obj.id;
  div.className = "drag";
  div.onmousedown = initDrag;
  drag_area.replaceChild(div, obj);
  obj = null
}

function highestOrder() {
  return z_index
}


//when the marker is dragged onto the map
//we call this function to create a marker on the map
function createDraggedMarker(position, iconImage) {
  var mapLocal = google.maps;
  var icon = {
    url: iconImage,
    size: new mapLocal.Size(32, 32),
    anchor: new mapLocal.Point(15, 32)
  };
  var marker = new mapLocal.Marker({
    position: position,
    map: map,
    clickable: true,
    draggable: true,
    crossOnDrag: false,
    optimized: false,
    icon: icon,
    zIndex: highestOrder()
  });

  mapLocal.event.addListener(marker, "click", function() {
    actual = marker;
    var lat = actual.getPosition().lat();
    var lng = actual.getPosition().lng();
    var innerHtml = "<div class='infowindow'>" + lat.toFixed(6) + ", " + lng.toFixed(6) + "<\/div>";
    iw.setContent(innerHtml);
    iw.open(map, this)
  });
  mapLocal.event.addListener(marker, "dragstart", function() {
    if (actual == marker) iw.close();
    z_index += 1;
    marker.setZIndex(highestOrder())
  })
}


//function that allows us to drag the marker from the div to the map
function initDrag(e) {
  //allows us to drag the marker and keep record of the clientX client Y coordinates
  var j = function(e) {
    var a = {};
    if (!e) var e = window.event;
    a.x = e.clientX;
    a.y = e.clientY
    return a
  };
  //function called whenever the mouse moves. this...