Navigation Functions (Heading)

by Lawrence Ross

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
        async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

JavaScript

// from http://en.wikipedia.org/wiki/Earth_radius
/*
/ Equatorial radius
/ The Earth's equatorial radius a, or semi-major axis, is the distance from its center to the equator and equals 6,378.1370 km (?3,963.191 mi; ?3,443.918 nmi).
*/
var EarthRadiusMeters = 6378137.0; // meters

var bounds;

function initMap() {
  bounds = new google.maps.LatLngBounds();
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  // Circle - intersecting point Lat:42.685896573405, Lng: 23.317402717551 - One point Lat:42.633574598298, Lng: 23.311314291808 - Two point Radius:3212 m.
  // Center on circle 1 - 42.660786 23.297769 - Center on circle 2 - 42.662789 23.266027
  var pointA = new google.maps.LatLng(42.685896573405, 23.317402717551);
  var center1 = new google.maps.LatLng(42.660786,23.297769);
  var circle1 = new google.maps.Polyline({
    map: map,
    path: drawCircle(center1, 3212),
    strokeOpacity: 0.2
  });
  google.maps.event.addListener(circle1, 'click', logCoord);
  // Circle - intersecting point Lat:42.685896573405, Lng: 23.317402717551 - One point Lat:42.633574598298, Lng: 23.311314291808 - Two point Radius:4919 m
  // Center on circle 1 - 42.660786 23.297769 - Center on circle 2 - 42.662789 23.266027
  var pointB = new google.maps.LatLng(42.633574598298, 23.311314291808);
  var center2 = new google.maps.LatLng(42.662789, 23.266027);
  var circle2 = new google.maps.Polyline({
    map: map,
    path: drawCircle(center2, 4919),
    strokeOpacity: 0.2
  });
  google.maps.event.addListener(circle2, 'click', logCoord);
  map.fitBounds(bounds);
  function logCoord(e) {
    console.log(e.latLng.toUrlValue(6));
  }
  var arc1 = new google.maps.Polyline({
    map: map,
    path: drawArc(center1, google.maps.geometry.spherical.computeHeading(center1, pointA),
    google.maps.geometry.spherical.computeHeading(center1, pointB), 3212),
    strokeColor: "blue"
  })
  var...