Directional arrow on polyline to show direction of travel on path

by dzul1983

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<body onload="initialize()">
  <div id="map" style="width: 100%; height: 600px;">
  </div>
</body>

JavaScript

function initialize() {
  var myLatLng = new google.maps.LatLng(58.816427, 5.748103);
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    draggable: true
  });

  var routePath = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });

  var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  var line = new google.maps.Polyline({
    path: [],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  google.maps.event.addDomListener(marker, 'dragend', function(e) {
    var closest = find_closest_point_on_path(e.latLng, path);
    marker.setPosition(closest);
    var line_end = find_line_end(e.latLng, path, 0.0005);
		if(line_end) {
    	line.setMap(map);
    	line.setPath([closest, line_end]);
    } else {
    	line.setMap(null);
    }
  });

  google.maps.event.addDomListener(marker, 'drag', function(e) {
    marker.setPosition(find_closest_point_on_path(e.latLng, path));
  });
  
  google.maps.event.addListenerOnce(map, 'idle', function() {
  	var line_end = find_line_end(myLatLng, path, 0.0005);
    line.setPath([myLatLng, line_end]);
  })
}

function find_line_end(drop_pt, path_pts, r) {
  var closest = find_closest_point_on_path(drop_pt, path_pts);
  var next_pt_index = _.findIndex(path_pts, {
    lat: closest.lat,
    lng: closest.lng
  }) + 1;
  var next_pt = path_pts[next_pt_index];
  if (next_pt == null) {
    return null;
  }

  // avoid dLat and dLng ever being 0,0
  while (closest.lat == next_pt.lat && closest.lng == next_pt.lng) {
    next_pt = path_pts[next_pt_index++];
    if (next_pt == null) {
      return null;
      break;
    }
  }

  var dLat = (next_pt.lat - closest.lat)
  var dLng = (next_pt.lng - closest.lng)
  var vectorLen = Math.sqrt(dLat * dLat +...