JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>

CSS

#map{ 
    height: 100vh; 
    width: 100vw;
}

JavaScript

var overlay;

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

function initialize(){

		var imageCode = '';

    $.get('firecask.co.uk/hosted/map.svg', function(data) {
      imageCode =  data;        
  	});

    var myLatLng = new google.maps.LatLng(51.036551, 1.488292);
    var myOptions = {
        zoom:2,
        center:myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);
    var marker = new google.maps.Marker({position:myLatLng,map:map});
    marker.setMap(map);
    var swBound = new google.maps.LatLng(51.00, 1.32);
    var neBound = new google.maps.LatLng(51.15, 1.6);
    var bounds = new google.maps.LatLngBounds(swBound,neBound);

    overlay = new myOverlay(bounds, imageCode, map);
}

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

myOverlay.prototype.onAdd = function(){
    var div = document.createElement('div');
    div.setAttribute('id','myDiv');
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '2px;';
    div.style.background = 'none';
    div.style.position = 'absolute';
    
    var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
    svg.setAttribute('width','400');
    svg.setAttribute('height','400');
    //svg.setAttribute('fill','#FFFFFF');
    svg.setAttribute('viewBox','0 0 400 400');
    
   
    //var img = this.image_;
    div.appendChild(svg);
    
    this.div_ = div;
    
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);    
    
};

myOverlay.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 =...