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>
<script type="text/javascript">
		var overlay;
		var loc_center = new google.maps.LatLng(40.743388, -74.007592);
		var k_diff = 0.005;
		var D_diff = 0.01;
		var rot = 0;

		function myFunction() {
			DebugOverlay.prototype = new google.maps.OverlayView();

		    function initialize() {
		      	var mapOptions = {
		        	zoom: 15,
		       		center: loc_center
		      	};

		      	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		      	var swBound = new google.maps.LatLng(loc_center.lat() - k_diff, loc_center.lng() - D_diff);
		      	var neBound = new google.maps.LatLng(loc_center.lat() + k_diff, loc_center.lng() + D_diff);
		      	var bounds = new google.maps.LatLngBounds(swBound, neBound);

		      	console.log(map);
		      	var srcImage = 'http://placehold.it/300x200';
		        
		      	overlay = new DebugOverlay(bounds, srcImage, map);

		      	//Center marker
		      	var center_marker = new google.maps.Marker({
	    			position: loc_center,
	    			map: map,
	    			draggable: true,
	    		});
		    	google.maps.event.addListener(center_marker,'drag',function() {
					var newPointA = new google.maps.LatLng(center_marker.getPosition().lat() - k_diff, center_marker.getPosition().lng() - D_diff);
		      		var newPointB = new google.maps.LatLng(center_marker.getPosition().lat() + k_diff, center_marker.getPosition().lng() + D_diff);
		      		var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);

		      		var newPointR = new google.maps.LatLng(center_marker.getPosition().lat() + (Math.cos(rot * Math.PI / 180) * 0.005), center_marker.getPosition().lng() + (Math.sin(rot * Math.PI / 180) * 0.005));		      		
		      		size_marker.setPosition(newPointB);					
		      		rotation_marker.setPosition(newPointR);

		           	overlay.updateBounds(newBounds);
		        });
		       ...

CSS

html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }