JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
<div id="zoom">...</div>
<div id="scale1">...</div>
<div id="scale2">...</div>
<div id="delta">...</div>
<div id="map_canvas" style="height:600px;width:800px;"></div>

JavaScript

var map;

    var TILE_SIZE = 256;
    // From Google Groups: 
    var circumference = 40075040;
    
    // From OSM = 40041472:
    //var circumference = 2 * 6372798.2 * Math.PI;
    
    //Standard:
    var DPI = 96;
    
    //OSM: 0.3mm/pixel (about 85.2 American DPI):
    //var DPI = 82.5;
    
    var g = google.maps;
    var round = Math.round;
    var abs = Math.abs;

    var opts = {
        center: new g.LatLng(55.75167, 37.61778),
        zoom: 13,
        mapTypeId: g.MapTypeId.ROADMAP,
        scaleControl: true
    }

    map = new g.Map(document.getElementById("map_canvas"), opts);

    var s = 55.74667;
    var n = 55.75667;
    var w = 37.61278
    var e = 37.62278;

    var coords = [
        new google.maps.LatLng(n, w),
        new google.maps.LatLng(n, e),
        new google.maps.LatLng(s, e),
        new google.maps.LatLng(s, w),
        new google.maps.LatLng(n, w)
    ];
    var polygon = new google.maps.Polygon({
       paths: [coords],
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: '#00FF00',
        fillOpacity: 0.35
    });

    debugger;
    var ds = new google.maps.DirectionsService();


polygon.setMap(map);
    
    g.event.addListener(map, 'idle', function () {
        var zoomElement = document.getElementById('zoom');
        var scaleElement1 = document.getElementById('scale1');
        var scaleElement2 = document.getElementById('scale2');
        var deltaElement = document.getElementById('delta');

        var mInPx1 = map.getMapScale1();
        var mInPx2 = map.getMapScale2();
        var scale1 = round(mInPx1 * DPI * (100 / 2.54));
        var scale2 = round(mInPx2 * DPI * (100 / 2.54));
 
        var scaleControlWidth = $(
            "div.gm-style-cc:has('span'):contains(' км') span" + ", " + 
            "div.gm-style-cc:has('span'):contains(' km') span" + ", " +
            "div.gm-style-cc:has('span'):contains(' м') span" + ", " + 
           ...