Find and show the route of the closest markers using DirectionsService by Google Map API v3

Question

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. http://ratan.com.np/calculate-distance-location-longitude-latitude-google-maps-v3-route/

and I have checked my codes repeatedly but i still don't know why the code failed... it returned a syntax error 'unexpected token <'....

Can anyone help me to take a look on the code... to see any conceptual mistake in my revised program.... Many Many Thanks...

Click a button to call 'Submit2() function

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


};

Call the calcRoute() function to calculate the route distance

  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 < myroute.legs.length; i++) {
    total_dist += myroute.legs[i].distance.value;
    }
    total_dist = total_dist / 1000 // the distance output is converted to KiloMeter

    }

The 'search_nearest_trig_advanced.php'

<?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" => $wgs84_start[0], "start_long" => $wgs84_start[1], "station_num" => $row['station_num'],"trig_name" => $row['trig_name'],"end_lat" => $wgs84_end[0],"end_long" => $wgs84_end[1]);
    }
    echo json_encode($row_set);
?>

Answer 1

The DistanceMatrix does not return route turn-by-turn directions. You have to use the DirectionsService for that. So, what you want to do is pass your origin and destinations to the Matrix first and find the shortest route. After you found the shortest route pass that route to the directions service to get the turn-by-turn information.

If you need to cycle through many routes you may have to use a premium service. Google limits the free access to its services to prevent abuse.

Here is a working example of the concept

Relevant code:

function calculateDistances() {
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
        origins: [origin], //array of origins
        destinations: destinations, //array of destinations
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, callback);
}

function callback(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
    } else {
        //we only have one origin so there should only be one row
        var routes = response.rows[0];
        //need to find the shortest 
        var lowest = Number.POSITIVE_INFINITY;
        var tmp;
        var shortestRouteIdx;
        var resultText = "Possible Routes: <br/>";
        for (var i = routes.elements.length - 1; i >= 0; i--) {
            tmp = routes.elements[i].duration.value;
            resultText += "Route " + destinations[i] + ": " + tmp + "<br/>";
            if (tmp < lowest) {
                lowest = tmp;
                shortestRouteIdx = i;
            }
        }
        //log the routes and duration.
        $('#results').html(resultText);

        //get the shortest route
        var shortestRoute = destinations[shortestRouteIdx];
        //now we need to map the route.
        calculateRoute(origin, shortestRoute)
    }
}

//Calculate the route of the shortest distance we found.
function calculateRoute(start, end) {
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
}

Answer 2

If you are trying to get the driving distance to multiple locations and don't need the route, use the DistanceMatrix