JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="googleMap" style="width:500px;height:380px;"></div>

JavaScript

var dcen = new google.maps.LatLng(51.508742, -0.120850);
var cor = new google.maps.LatLng(51.508742, -0.120850);
var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var circle = new google.maps.Circle({
    center: new google.maps.LatLng(51.508742, -0.120850),
    radius: 20000,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000FF",
    fillOpacity: 0.2,
    draggable: true,
    editable: true
});
circle.setMap(map);
//var lt1 = circle.getBounds().getSouthWest().lat();
//alert(lt1);
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.508742, -0.120850),
    draggable: true
});

marker.setMap(map);
google.maps.event.addListener(marker, 'dragend', function (e) {
    cor = e.latLng;
    alert(distHaversine(dcen, cor));
});
google.maps.event.addListener(circle, 'radius_changed', function (e) {

});
google.maps.event.addListener(circle, 'center_changed', function (e) {
    dcen = this.getCenter();
    alert(distHaversine(dcen, cor));
});

rad = function (x) {
    return x * Math.PI / 180;
}

distHaversine = function (p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat = rad(p2.lat() - p1.lat());
    var dLong = rad(p2.lng() - p1.lng());

    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;

    return d.toFixed(3);
}

function getdata(lt1, lg1, lt2, lg2) {
    var json = [];
    $.ajax({
        url: "/echo/html",
        data: {
            lat1: lt1,
            lng1: lg1,
            lat2: lt2,
            lng2: lg2
        },
        dataType: "json",
        success: function (res) {
            $.each(res, function (i, item) {

               ...