JSFiddle - React, Tailwind, and code Playground

by jamesinealing

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var overlay;

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

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(50.729219, 2.944866)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var swBound = new google.maps.LatLng(50.724366, 2.938);
  var neBound = new google.maps.LatLng(50.736750, 2.952300);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  console.log(map);
  var srcImage = 'http://media.iwm.org.uk/loris/460/766/super_000000.jpg/full/full/84/default.png';

  overlay = new DebugOverlay(bounds, srcImage, map);
  var swBound2 = new google.maps.LatLng(50.717852, 2.9386);
  var neBound2 = new google.maps.LatLng(50.729356, 2.955005);
  var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);

  var srcImage2 = 'http://media.iwm.org.uk/loris/460/768/super_000000.jpg/full/full/67/default.png';

  overlay = new DebugOverlay(bounds2, srcImage2, map);

}

function DebugOverlay(bounds, image, map) {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}

DebugOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.opacity = '0.8';
  img.style.position = 'absolute';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

DebugOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x...