JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

CSS

#map {
    width: 1024px;
    height: 1024px;
}

JavaScript

var overlay;

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

  function initialize() {
    var myLatLng = new google.maps.LatLng(0, 0);
    var myOptions = {
      zoom: 16,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var swBound = new google.maps.LatLng(0, 0);
    var neBound = new google.maps.LatLng(1024, 1024);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    // Photograph courtesy of the U.S. Geological Survey
    var srcImage = 'http://tor.zamimg.com/torhead/images/maps/large/4611686022825732973/map_korriban_main.jpg';
    overlay = new USGSOverlay(bounds, srcImage, map);
  }

  function USGSOverlay(bounds, image, map) {

    // Now initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    // We define a property to hold the image's div. We'll 
    // actually create this div upon receipt of the onAdd() 
    // method so we'll leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay
    this.setMap(map);
  }

  USGSOverlay.prototype.onAdd = function() {

    // Note: an overlay's receipt of onAdd() indicates that
    // the map's panes are now available for attaching
    // the overlay to the map via the DOM.

    // Create the DIV and set some basic attributes.
    var div = document.createElement('DIV');
    div.style.borderStyle = "none";
    div.style.borderWidth = "0px";
    div.style.position = "absolute";

    // Create an IMG element and attach it to the DIV.
    var img = document.createElement("img");
    img.src = this.image_;
    img.style.width = "100%";
    img.style.height = "100%";
    div.appendChild(img);

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayImage pane.
    var panes =...