JSFiddle - React, Tailwind, and code Playground

by barbarina

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
  width: 100%;
  height: 100%;
}

JavaScript

var overlay;

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

function initialize() {
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(40.743388, -74.007592)
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328);
    var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    var srcImage = 'http://og11tunnel.it/og11_jom_fp/images/stories/virtuemart/product/pmv_alfa_1.jpg';

    overlay = new DebugOverlay(bounds, srcImage, map);

    var markerA = new google.maps.Marker({
        position: swBound,
        map: map,
        draggable: true
    });

    var markerB = new google.maps.Marker({
        position: neBound,
        map: map,
        draggable: true
    });
    overlay.bindTo('sw', markerA, 'position', true);
    overlay.bindTo('ne', markerB, 'position', true);

    google.maps.event.addListener(markerA, 'drag', function () {

        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
        overlay.updateBounds(newBounds);
    });

    google.maps.event.addListener(markerB, 'drag', function () {

        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
        overlay.updateBounds(newBounds);
    });

    google.maps.event.addListener(markerA, 'dragend', function () {

        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        console.log("point1" + newPointA);
        console.log("point2" + newPointB);
    });

    google.maps.event.addListener(markerB, 'dragend', function () {
        var newPointA = markerA.getPosition();
        var newPointB =...