Navigation Functions (Heading)

// This example requires the Geometry library. Include the libraries=geometry // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">  let marker1: google.maps.Marker, marker2: google.maps.Marker; let poly: google.maps.Polyline, geodesicPoly: google.maps.Polyline;  function initMap(): void {   const map = new google.maps.Map(     document.getElementById("map") as HTMLElement,     {       zoom: 4,       center: { lat: 34, lng: -40.605 },     }   );    map.controls[google.maps.ControlPosition.TOP_CENTER].push(     document.getElementById("info") as HTMLElement   );    marker1 = new google.maps.Marker({     map,     draggable: true,     position: { lat: 40.714, lng: -74.006 },   });    marker2 = new google.maps.Marker({     map,     draggable: true,     position: { lat: 48.857, lng: 2.352 },   });    const bounds = new google.maps.LatLngBounds(     marker1.getPosition() as google.maps.LatLng,     marker2.getPosition() as google.maps.LatLng   );    map.fitBounds(bounds);    google.maps.event.addListener(marker1, "position_changed", update);   google.maps.event.addListener(marker2, "position_changed", update);    poly = new google.maps.Polyline({     strokeColor: "#FF0000",     strokeOpacity: 1.0,     strokeWeight: 3,     map: map,   });    geodesicPoly = new google.maps.Polyline({     strokeColor: "#CC0099",     strokeOpacity: 1.0,     strokeWeight: 3,     geodesic: true,     map: map,   });    update(); }  function update() {   const path = [     marker1.getPosition() as google.maps.LatLng,     marker2.getPosition() as google.maps.LatLng,   ];    poly.setPath(path);   geodesicPoly.setPath(path);    const heading = google.maps.geometry.spherical.computeHeading(     path[0],     path[1]   );    (document.getElementById("heading") as HTMLInputElement).value =     String(heading);   (document.getElementById("origin") as HTMLInputElement).value = String(     path[0]   );   (document.getElementById("destination") as HTMLInputElement).value = String(     path[1]   ); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;
index.ts

// This example requires the Geometry library. Include the libraries=geometry // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"> let marker1, marker2; let poly, geodesicPoly;  function initMap() {   const map = new google.maps.Map(document.getElementById("map"), {     zoom: 4,     center: { lat: 34, lng: -40.605 },   });    map.controls[google.maps.ControlPosition.TOP_CENTER].push(     document.getElementById("info"),   );   marker1 = new google.maps.Marker({     map,     draggable: true,     position: { lat: 40.714, lng: -74.006 },   });   marker2 = new google.maps.Marker({     map,     draggable: true,     position: { lat: 48.857, lng: 2.352 },   });    const bounds = new google.maps.LatLngBounds(     marker1.getPosition(),     marker2.getPosition(),   );    map.fitBounds(bounds);   google.maps.event.addListener(marker1, "position_changed", update);   google.maps.event.addListener(marker2, "position_changed", update);   poly = new google.maps.Polyline({     strokeColor: "#FF0000",     strokeOpacity: 1.0,     strokeWeight: 3,     map: map,   });   geodesicPoly = new google.maps.Polyline({     strokeColor: "#CC0099",     strokeOpacity: 1.0,     strokeWeight: 3,     geodesic: true,     map: map,   });   update(); }  function update() {   const path = [marker1.getPosition(), marker2.getPosition()];    poly.setPath(path);   geodesicPoly.setPath(path);    const heading = google.maps.geometry.spherical.computeHeading(     path[0],     path[1],   );    document.getElementById("heading").value = String(heading);   document.getElementById("origin").value = String(path[0]);   document.getElementById("destination").value = String(path[1]); }  window.initMap = initMap;
index.js

/*   * 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; } 
style.css

<html>   <head>     <title>Navigation Functions (Heading)</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div id="map"></div>     <div id="floating-panel">       Origin: <input type="text" readonly id="origin" /> Destination:       <input type="text" readonly id="destination" /><br />       Heading: <input type="text" readonly id="heading" /> degrees     </div>      <!--        The `defer` attribute causes the script to execute after the full HTML       document has been parsed. For non-blocking uses, avoiding race conditions,       and consistent behavior across browsers, consider loading using Promises. See       https://developers.google.com/maps/documentation/javascript/load-maps-js-api       for more information.       -->     <script       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=geometry&v=weekly"       defer     ></script>   </body> </html>
index.html