JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<body onload="initializeMap()">
    <div id="layer"></div>
</body>

CSS

#layer {
    width: 100%;
    height: 600px;
    top: 0;
    left: 0;
}

#slider {
    width:100px;
    margin:10px;
}

JavaScript

var map;
var overlay;
var initialOpacity = 50;
TestOverlay.prototype = new google.maps.OverlayView();

TestOverlay.prototype.setOpacity = function (op) {
    //Set opacity to all layer's divs (range from 0.00 to 1.00)
    $("div.myLayer").css("opacity", op/100);
}

function initializeMap(container) {
    var mapOptions = {
        zoom: 12,
        maxZoom: 12,
        minZoom: 12,
        center: new google.maps.LatLng(40.740, -74.18),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    map = new google.maps.Map(document.getElementById('layer'), mapOptions);
    var swBound = new google.maps.LatLng(40.912216, -74.22455);
    var neBound = new google.maps.LatLng(40.778941, -74.12544);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    var imageSrc = 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
    overlay = new TestOverlay(bounds, imageSrc, map, initialOpacity);

    var sliderControlDiv = document.createElement('div');
    var sliderControlObj = new sliderControl(sliderControlDiv, map);
    sliderControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(sliderControlDiv);
}

function sliderControl(controlDiv, map) {
    controlDiv.innerHTML = "<div id='slider'></div>";
    // Wait until DOM initialized
    var to = setInterval(function(){
       if($("#slider").length){
           clearInterval(to);
           $("#slider").slider({
               min: 0,
               max: 100,
               step: 1,
               value: 100,
               slide: function() {
                   overlay.setOpacity($("#slider").slider("value"));
               }
           });
       }
    }, 100);
}


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

TestOverlay.prototype.onAdd = function () {
    var div = document.createElement('div');
   ...