geometry navigation functions heading

Add navigations functions to map.

var poly;
var geodesicPoly;
var marker1;
var marker2;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(34, -40.605),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById(\'map-canvas\'),
      mapOptions);

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


  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: new google.maps.LatLng(40.71435280, -74.0059731)
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: new google.maps.LatLng(48.8566140, 2.35222190)
  });

  var 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);

  var polyOptions = {
    strokeColor: \'#FF0000\',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  };
  poly = new google.maps.Polyline(polyOptions);

  var geodesicOptions = {
    strokeColor: \'#CC0099\',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  };
  geodesicPoly = new google.maps.Polyline(geodesicOptions);

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0],
      path[1]);
  document.getElementById(\'heading\').value = heading;
  document.getElementById(\'origin\').value = path[0].toString();
  document.getElementById(\'destination\').value = path[1].toString();
}

google.maps.event.addDomListener(window, \'load\', initialize);