JSFiddle - React, Tailwind, and code Playground

by johannpickard

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: 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);

       console.log(map);
      var srcImage = 'http://robincwillis.com/top/splash/04.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
    	});

    	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 = markerB.getPosition();
           ...