stinkymonkeyph/distance.html

## distance.html
<!DOCTYPE html>
<html>
  <head>
    <title>My Location</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 616px;
        margin-top: 5px;
      }

      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .gray-matter{
        background-color: whitesmoke;
      }

      .right-side{
        height: 616px;
        margin-top: 5px;
      }

      .head-top {
        font-family: 'Spinnaker', sans-serif;
      }

      .inline-points {
        display: inline;
      }

      .above-min{
        margin-top: 10px;
      }

      .indent-margin {
        margin-left: 15px;
      }

    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">
  </head>

  <body>
    <div class="container-fluid" style="max-width:95%;height:100%;">
      <div class="row">
        <div id="map" class="col-9">
        </div>
        <div class="col gray-matter right-side" >
          <h2 class="head-top"><b>D</b>istance <b>C</b>alculator</h2>
          <hr>
          <h5 class="above-min">Point A</h5>
          <p class="indent-margin"><b>Lat:</b> <span id="point-a-lat"></span></p>
          <p class="indent-margin"><b>Long:</b> <span id="point-a-long"></span></p>
          <h5 class="above-min">Point B</h5>
          <p class="indent-margin"><b>Lat:</b> <span id="point-b-lat"></span></p>
          <p class="indent-margin"><b>Long:</b> <span id="point-b-long"></span></p>
          <p class="above-min"><b>Total Distance:</b> <span id="total-dist"></span></p>
          <p class="above-min"><b>Expected Time Arrival:</b> <span id="duration"></span></p>
        </div>
      </div>
    </div>
  </body>

  <script>
    var map, infoWindow;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 7.8232, lng: 124.4198 },
        zoom: 10
      });
      infoWindow = new google.maps.InfoWindow;

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

          var current = {
            lat: 7.995280,
            lng: 124.256582
          };

          var destination = {
            lat: 8.2280,
            lng: 124.2452
          };

          $("#point-a-lat").html(current.lat);
          $("#point-a-long").html(current.lng);

          $("#point-b-lat").html(destination.lat);
          $("#point-b-long").html(destination.lng);

          infoWindow.open(map);
          map.setCenter(current);

          var current_marker = new google.maps.Marker({
            position: current,
            map: map,
            title: 'You are currently here'
          });

          var destination_marker = new google.maps.Marker({
            position: destination,
            map: map,
            title: 'Destination'
          });

          var current_circle = new google.maps.Circle({
            map: map,
            radius: 4828.03,    // miles in metere => 3 miles
            fillColor: '#FF0000', //'#AA0000',
            fillOpacity: 0.20
          });

          var destination_circle = new google.maps.Circle({
            map: map,
            radius: 4828.03,    // miles in metere => 3 miles
            fillColor: '#FF0000', //'#AA0000',
            fillOpacity: 0.20
          });

          current_circle.bindTo('center', current_marker, 'position');
          destination_circle.bindTo('center', destination_marker, 'position');

          var start = new google.maps.LatLng(current.lat, current.lng);
          var end = new google.maps.LatLng(destination.lat, destination.lng);
          var bounds = new google.maps.LatLngBounds();

          bounds.extend(start);
          bounds.extend(end);

          map.fitBounds(bounds);

          var request = {
            origin: current,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
          };

          var directionsService = new google.maps.DirectionsService();
          var directionsDisplay = new google.maps.DirectionsRenderer();
          var duration;

          directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
                var point = response.routes[ 0 ].legs[ 0 ];
                duration = point.duration.text;
                $("#duration").html(duration);
            } else {
                alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
            }
          });


          /**
          google.maps.LatLng.prototype.distanceFrom = function(latlng) {
            var lat = [this.lat(), latlng.lat()]
            var lng = [this.lng(), latlng.lng()]
            var R = 6378137;
            var dLat = (lat[1]-lat[0]) * Math.PI / 180;
            var dLng = (lng[1]-lng[0]) * Math.PI / 180;
            var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
            Math.sin(dLng/2) * Math.sin(dLng/2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            var d = R * c;
            return Math.round(d);
          }

          var dist = end.distanceFrom(start);

          Using the Haversine Formula

          **/


          var distance = google.maps.geometry.spherical.computeDistanceBetween(start, end);
          var converted_distance = distance/1000;
          $("#total-dist").html(converted_distance.toFixed(2) + " km.");


        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });
      } else {
        handleLocationError(false, infoWindow, map.getCenter());
      }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
      infoWindow.setPosition(pos);
      infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
      infoWindow.open(map);
    }
  </script>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]Fw&callback=initMap">
  </script>

</html>

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <title>My Location</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 616px;
        margin-top: 5px;
      }

      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .gray-matter{
        background-color: whitesmoke;
      }

      .right-side{
        height: 616px;
        margin-top: 5px;
      }

      .head-top {
        font-family: 'Spinnaker', sans-serif;
      }

      .inline-points {
        display: inline;
      }

      .above-min{
        margin-top: 10px;
      }

      .indent-margin {
        margin-left: 15px;
      }

    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">
  </head>

  <body>
    <div class="container-fluid" style="max-width:95%;height:100%;">
      <div class="row">
        <div id="map" class="col-9">
        </div>
        <div class="col gray-matter right-side" >
          <h2 class="head-top"><b>D</b>istance <b>C</b>alculator</h2>
          <hr>
          <h5 class="above-min">Point A</h5>
          <p class="indent-margin"><b>Lat:</b> <span id="point-a-lat"></span></p>
          <p class="indent-margin"><b>Long:</b> <span id="point-a-long"></span></p>
          <h5 class="above-min">Point B</h5>
          <p class="indent-margin"><b>Lat:</b> <span id="point-b-lat"></span></p>
          <p class="indent-margin"><b>Long:</b> <span id="point-b-long"></span></p>
          <p class="above-min"><b>Total Distance:</b> <span id="total-dist"></span></p>
          <p class="above-min"><b>Expected Time Arrival:</b> <span id="duration"></span></p>
        </div>
      </div>
    </div>
  </body>

  <script>
    var map, infoWindow;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 7.8232, lng: 124.4198 },
        zoom: 10
      });
      infoWindow = new google.maps.InfoWindow;

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

          var current = {
            lat: 7.995280,
            lng: 124.256582
          };

          var destination = {
            lat: 8.2280,
            lng: 124.2452
          };

          $("#point-a-lat").html(current.lat);
          $("#point-a-long").html(current.lng);

          $("#point-b-lat").html(destination.lat);
          $("#point-b-long").html(destination.lng);

          infoWindow.open(map);
          map.setCenter(current);

          var current_marker = new google.maps.Marker({
            position: current,
            map: map,
            title: 'You are currently here'
          });

          var destination_marker = new google.maps.Marker({
            position: destination,
            map: map,
            title: 'Destination'
          });

          var current_circle = new google.maps.Circle({
            map: map,
            radius: 4828.03,    // miles in metere => 3 miles
            fillColor: '#FF0000', //'#AA0000',
            fillOpacity: 0.20
          });

          var destination_circle = new google.maps.Circle({
            map: map,
            radius: 4828.03,    // miles in metere => 3 miles
            fillColor: '#FF0000', //'#AA0000',
            fillOpacity: 0.20
          });

          current_circle.bindTo('center', current_marker, 'position');
          destination_circle.bindTo('center', destination_marker, 'position');

          var start = new google.maps.LatLng(current.lat, current.lng);
          var end = new google.maps.LatLng(destination.lat, destination.lng);
          var bounds = new google.maps.LatLngBounds();

          bounds.extend(start);
          bounds.extend(end);

          map.fitBounds(bounds);

          var request = {
            origin: current,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
          };

          var directionsService = new google.maps.DirectionsService();
          var directionsDisplay = new google.maps.DirectionsRenderer();
          var duration;

          directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
                var point = response.routes[ 0 ].legs[ 0 ];
                duration = point.duration.text;
                $("#duration").html(duration);
            } else {
                alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
            }
          });


          /**
          google.maps.LatLng.prototype.distanceFrom = function(latlng) {
            var lat = [this.lat(), latlng.lat()]
            var lng = [this.lng(), latlng.lng()]
            var R = 6378137;
            var dLat = (lat[1]-lat[0]) * Math.PI / 180;
            var dLng = (lng[1]-lng[0]) * Math.PI / 180;
            var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
            Math.sin(dLng/2) * Math.sin(dLng/2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            var d = R * c;
            return Math.round(d);
          }

          var dist = end.distanceFrom(start);

          Using the Haversine Formula

          **/


          var distance = google.maps.geometry.spherical.computeDistanceBetween(start, end);
          var converted_distance = distance/1000;
          $("#total-dist").html(converted_distance.toFixed(2) + " km.");


        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });
      } else {
        handleLocationError(false, infoWindow, map.getCenter());
      }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
      infoWindow.setPosition(pos);
      infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
      infoWindow.open(map);
    }
  </script>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAad2iWGfD3-WTCeaFP_jKSIGVMirYSvFw&callback=initMap">
  </script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Location</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	#map {
	height: 616px;
	margin-top: 5px;
	}

	html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	}

	.gray-matter{
	background-color: whitesmoke;
	}

	.right-side{
	height: 616px;
	margin-top: 5px;
	}

	.head-top {
	font-family: 'Spinnaker', sans-serif;
	}

	.inline-points {
	display: inline;
	}

	.above-min{
	margin-top: 10px;
	}

	.indent-margin {
	margin-left: 15px;
	}

	</style>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">
	</head>

	<body>
	<div class="container-fluid" style="max-width:95%;height:100%;">
	<div class="row">
	<div id="map" class="col-9">
	</div>
	<div class="col gray-matter right-side" >
	<h2 class="head-top"><b>D</b>istance <b>C</b>alculator</h2>
	<hr>
	<h5 class="above-min">Point A</h5>
	<p class="indent-margin"><b>Lat:</b> <span id="point-a-lat"></span></p>
	<p class="indent-margin"><b>Long:</b> <span id="point-a-long"></span></p>
	<h5 class="above-min">Point B</h5>
	<p class="indent-margin"><b>Lat:</b> <span id="point-b-lat"></span></p>
	<p class="indent-margin"><b>Long:</b> <span id="point-b-long"></span></p>
	<p class="above-min"><b>Total Distance:</b> <span id="total-dist"></span></p>
	<p class="above-min"><b>Expected Time Arrival:</b> <span id="duration"></span></p>
	</div>
	</div>
	</div>
	</body>

	<script>
	var map, infoWindow;
	function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 7.8232, lng: 124.4198 },
	zoom: 10
	});
	infoWindow = new google.maps.InfoWindow;

	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {

	var current = {
	lat: 7.995280,
	lng: 124.256582
	};

	var destination = {
	lat: 8.2280,
	lng: 124.2452
	};

	$("#point-a-lat").html(current.lat);
	$("#point-a-long").html(current.lng);

	$("#point-b-lat").html(destination.lat);
	$("#point-b-long").html(destination.lng);

	infoWindow.open(map);
	map.setCenter(current);

	var current_marker = new google.maps.Marker({
	position: current,
	map: map,
	title: 'You are currently here'
	});

	var destination_marker = new google.maps.Marker({
	position: destination,
	map: map,
	title: 'Destination'
	});

	var current_circle = new google.maps.Circle({
	map: map,
	radius: 4828.03, // miles in metere => 3 miles
	fillColor: '#FF0000', //'#AA0000',
	fillOpacity: 0.20
	});

	var destination_circle = new google.maps.Circle({
	map: map,
	radius: 4828.03, // miles in metere => 3 miles
	fillColor: '#FF0000', //'#AA0000',
	fillOpacity: 0.20
	});

	current_circle.bindTo('center', current_marker, 'position');
	destination_circle.bindTo('center', destination_marker, 'position');

	var start = new google.maps.LatLng(current.lat, current.lng);
	var end = new google.maps.LatLng(destination.lat, destination.lng);
	var bounds = new google.maps.LatLngBounds();

	bounds.extend(start);
	bounds.extend(end);

	map.fitBounds(bounds);

	var request = {
	origin: current,
	destination: destination,
	travelMode: google.maps.TravelMode.DRIVING
	};

	var directionsService = new google.maps.DirectionsService();
	var directionsDisplay = new google.maps.DirectionsRenderer();
	var duration;

	directionsService.route(request, function (response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	directionsDisplay.setMap(map);
	var point = response.routes[ 0 ].legs[ 0 ];
	duration = point.duration.text;
	$("#duration").html(duration);
	} else {
	alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
	}
	});



	/**
	google.maps.LatLng.prototype.distanceFrom = function(latlng) {
	var lat = [this.lat(), latlng.lat()]
	var lng = [this.lng(), latlng.lng()]
	var R = 6378137;
	var dLat = (lat[1]-lat[0]) * Math.PI / 180;
	var dLng = (lng[1]-lng[0]) * Math.PI / 180;
	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
	Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
	Math.sin(dLng/2) * Math.sin(dLng/2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
	var d = R * c;
	return Math.round(d);
	}

	var dist = end.distanceFrom(start);

	Using the Haversine Formula

	**/


	var distance = google.maps.geometry.spherical.computeDistanceBetween(start, end);
	var converted_distance = distance/1000;
	$("#total-dist").html(converted_distance.toFixed(2) + " km.");


	}, function() {
	handleLocationError(true, infoWindow, map.getCenter());
	});
	} else {
	handleLocationError(false, infoWindow, map.getCenter());
	}
	}

	function handleLocationError(browserHasGeolocation, infoWindow, pos) {
	infoWindow.setPosition(pos);
	infoWindow.setContent(browserHasGeolocation ?
	'Error: The Geolocation service failed.' :
	'Error: Your browser doesn\'t support geolocation.');
	infoWindow.open(map);
	}
	</script>

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]Fw&callback=initMap">
	</script>

	</html>