Navigation functions (heading)

by Rosi Ramoreez

HTML

<div id="map"></div>
<div id="floating-panel">
  Origin: <input type="text" readonly id="origin">
  Destination: <input type="text" readonly id="destination">
  <br>Distance: <input type="text" readonly id="distance"> Meter
  <br>Distance: <input type="text" readonly id="distance2"> Meter
  <br>polylineLength: <input type="text" readonly id="polylineLength"> Meter
</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

// 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">

var marker1, marker2, marker3, marker4;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -7.701725, lng: 109.028954}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: -7.701725, lng: 109.028954}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: -6.857438, lng: 109.135392}
  });
  
  marker3 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: -7.57043, lng: 110.130573}
  });
  
  marker4 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: -6.927979, lng: 110.20134}
  });

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);
	google.maps.event.addListener(marker3, 'position_changed', update);
  google.maps.event.addListener(marker4, 'position_changed', update);
  
  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  update();
}

function update() {
  //var path = [marker1.getPosition(), marker2.getPosition(),marker3.getPosition(),marker4.getPosition(),marker1.getPosition()];
  
  var path = [marker1.getPosition(), marker2.getPosition()];
  
  poly.setPath(path);
  var lengthInMeters = google.maps.geometry.spherical.computeDistanceBetween(path[0],path[1]);
  var lengthInMeters2 = google.maps.geometry.spherical.computeLength(path);

  document.getElementById('distance').value = lengthInMeters;
 ...