title: Find and show the route of the closest markers using DirectionsService by Google Map API v3
body: <p>Thanks for the help in this forum and i almost complete my assignment in searching the shortest route between a starting point and many markers. However, my distance measurment is simply adopting Haversine formula but it is not showing the true routing distance between two points. I am trying to combining the previous developed functions that have already been worked in Google Map to obtain the shortest distance between two point using the DirectionServices. From the following homepage, i found the method to calculate the distance of each route.
  <a href="http://ratan.com.np/calculate-distance-location-longitude-latitude-google-maps-v3-route/" rel="nofollow">http://ratan.com.np/calculate-distance-location-longitude-latitude-google-maps-v3-route/</a></p>
  
  <p>and I have checked my codes repeatedly but i still don't know why the code failed... it returned a syntax error 'unexpected token &lt;'....</p>
  
  <p>Can anyone help me to take a look on the code... to see any conceptual mistake in my revised program.... Many Many Thanks...</p>
  
  <p>Click a button to call 'Submit2() function</p>
  
  <pre><code>var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  
  var map;
  var origin = null;
  var destination = null;
  var markersArray = [];
  
  var start_lat = null;
  var start_long = null;
  var end_lat = null;
  var end_long = null;
  
  var station_num = null; 
  var trig_name = null;
  
  
  var total_dist;
  var closest_dist;
  var closest_marker;
  
  
  var Submit2=function() {
  
          var URL2="Search_nearest_trig_advanced.php";    //Call another PHP to load all markers in JSON format
          $.ajax({
              url: URL2,
  
              type: "POST",
              dataType: "json",
              success: function(data){
                  $.each(data, function(i, item) {
                       start_lat = item.start_lat;  //Return the Lat, Lng of the Starting point from Textbox
                       start_long = item.start_long;
                       station_num = item.station_num; 
                       trig_name = item.trig_name;
                       end_lat = item.end_lat;
                       end_long = item.end_long;
  
  
                       origin = new google.maps.LatLng(start_lat, start_long); //Origin and Destination parameters are used for Google Direction Services
                       destination = new google.maps.LatLng(end_lat, end_long);   
                       marker = new google.maps.Marker({
                           map: map,
                           position: destination,
                           icon: trigicon,
                           title: trig_name
                       })
                       markersArray.push(marker);
                       calcRoute2();  //find the total distance 'total_dist' for each route
  
                       if (total_dist &gt; closest_dist) { //Replace the closest_marker by the one with shorter distance
                       closest_dist = total;   
                       closest_marker.setMap(null);
                       closest_marker = marker;
                       } 
  
                  }); 
              },
  
              error:function(xhr, ajaxOptions, thrownError){ 
                  alert(xhr.status); 
                  alert(thrownError); 
               }
  
          }); 
  
          destination = closest_marker.getPosition();
          calcRoute(); //the original method to show the route
  
  
  };
  </code></pre>
  
  <p>Call the calcRoute() function to calculate the route distance</p>
  
  <pre><code>  function calcRoute2() {
  
    document.getElementById("directions_panel").innerHTML = "";
  
  
    directionsDisplay = new google.maps.DirectionsRenderer({
      'map': map,
      'preserveViewport': false,  //Google Map will change the zoom extent to match with the Direction route if set false
      'draggable': true
  });
  
  
  var request = {
      origin: origin,
      destination: destination,
      waypoints: waypoints,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      optimizeWaypoints: document.getElementById('optimize').checked,
      avoidHighways: document.getElementById('highways').checked,
      avoidTolls: document.getElementById('tolls').checked
  };
  
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      computeTotalDistance(response);
  
    }
  });
  
  directionsVisible = false;
  }
  
  function computeTotalDistance(result) {
      var total_dist = 0;
      var myroute = result.routes[0];
      for (i = 0; i &lt; myroute.legs.length; i++) {
      total_dist += myroute.legs[i].distance.value;
      }
      total_dist = total_dist / 1000 // the distance output is converted to KiloMeter
  
      }
  </code></pre>
  
  <p>The 'search_nearest_trig_advanced.php'</p>
  
  <pre><code>&lt;?php
  require_once "dbconnect.php";
  require_once "hk1980.php";
      $coor_x = $_POST['hk80_x'];
      $coor_y = $_POST['hk80_y'];
  /* Connect to the MySQL database. */
  if (!($connection = @ mysql_connect($remotehost, $username, $password)))
      die("Connection failed");
  if (!(mysql_select_db($database, $connection)))
      die("Couldn't select testing database");
  
  // Run the query on the connection
  
  $sql_query = "Select station_num, trig_name, X(trig_xy_pos) as X_Coor, Y(trig_xy_pos) as Y_Coor From trig_station";
  
  if (!($sql_result = @ mysql_query($sql_query, $connection)))
      die("Couldn't run query");
  
  while ($row = @ mysql_fetch_array($sql_result, MYSQL_ASSOC))
  {   
          $start_east = floatval($coor_x);
          $start_north = floatval($coor_y);
          $hk1980_start = array($start_east, $start_north);   
  
          $end_east = floatval($row['X_Coor']);
          $end_north = floatval($row['Y_Coor']);
          $hk1980_end = array($end_east,$end_north);
  
          $wgs84_start = hk1980_to_wgs84($hk1980_start[1],$hk1980_start[0],2);
          $wgs84_end = hk1980_to_wgs84($hk1980_end[1],$hk1980_end[0],2);
  
          $row_set[] = array("start_lat" =&gt; $wgs84_start[0], "start_long" =&gt; $wgs84_start[1], "station_num" =&gt; $row['station_num'],"trig_name" =&gt; $row['trig_name'],"end_lat" =&gt; $wgs84_end[0],"end_long" =&gt; $wgs84_end[1]);
      }
      echo json_encode($row_set);
  ?&gt;
  </code></pre>