JSFiddle - React, Tailwind, and code Playground

by Morlock0821

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcoHuqXgppYH-FZJ4Y8rtRt3eH0Nu4Rto&sensor=false">
    </script>
    <script type="text/javascript">
        var cityCircle;
        var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(26.187175,-80.202993),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        // Create an object containing LatLng, population.
        var buffer = {
          center: new google.maps.LatLng(26.187175,-80.202993),
          radius: 1609.34 // 1 mile in meters
        };

          for (var point in buffer) {
            // Construct the circle for each value in citymap. We scale population by 20.
            var populationOptions = {
              strokeColor: "transparent",
              fillColor: "#FF0000",
              fillOpacity: 0.35,
              map: map,
              center: buffer.center,
              radius: buffer.radius
            };
            //buffer = new google.maps.Circle(populationOptions);
        }

        var getPointBearing = new google.maps.Circle();
        var getPointBearingOptions = {
            strokeColor: "transparent",
              fillColor: "#FF0000",
              fillOpacity: 0.35,
              map: map,
              center: new google.maps.LatLng(26.18715,-80.122354),
              radius: 1609.34 // 1 mile in meters
        }
        //getPointBearing.setOptions(getPointBearingOptions);


        rectangle = new google.maps.Rectangle();
        var swc =...

JavaScript

var marker1, marker2;
var circle,line,circleBase;
var icons;

function calculateBearing() {
  var p1 = marker1.getPosition();
  var p2 = marker2.getPosition();
  with (Math) {
    var lat1 = p1.lat() * (PI/180);
    var lon1 = p1.lng() * (PI/180);
    var lat2 = p2.lat() * (PI/180);
    var lon2 = p2.lng() * (PI/180);

    var d = 2*asin(sqrt( pow((sin((lat1-lat2)/2)),2) + cos(lat1)*cos(lat2)*pow((sin((lon1-lon2)/2)),2)));
    var bearing = atan2(sin(lon1-lon2)*cos(lat2), cos(lat1)*sin(lat2)-sin(lat1)*cos(lat2)*cos(lon1-lon2))  / -(PI/180);
    bearing = bearing < 0 ? 360 + bearing : bearing;
    var bearing = 360 - bearing + 90; // 0 degrees at 3 o'clock and counting couterclockwise

    console.log('Bearing: ' + bearing % 360)
  }

  distance = GetDistance(p1.lat(), p1.lng(), p2.lat(), p2.lng()); //p1.distanceFrom(p2) / 1609;
  drawCircle(marker1,distance,bearing);

  if (line) {
    //map.removeOverlay(line);
    line.setMap(null);
  }
  line = new google.maps.Polyline({
    path: [marker1.getPosition(),marker2.getPosition()],
    strokeColor: '#0000ff',
    strokeWeight: 2,
    strokeOpacity: 1
  });
  //map.addOverlay(line);
  line.setMap(map);

}

function calculatePoint() {
  var startLat = marker1.getPosition().lat();
  var startLon = marker1.getPosition().lng();

  with (Math) {
    var distance = 2; //miles
    var bearing = 45; // 0 degrees at 3 o'clock and counting couterclockwise, so 90 is due north)

    var radiansLat = (distance/3963.189) * (180/PI);
    var radiansLng = radiansLat/cos(startLat * (PI/180));
    var radiansBearing = bearing * (PI/180);

    var destLon = startLon + (radiansLng * cos(radiansBearing));
    var destLat = startLat + (radiansLat * sin(radiansBearing));
    var destPoint = new google.maps.LatLng(parseFloat(destLat),parseFloat(destLon));
  }

  marker2 = setMarker(marker2,destPoint,'Lat: ' + destPoint.lat() + '<br>Lon: ' + destPoint.lng(),'Destination',icons[1]);

  calculateBearing();

}

function...