How to Draw Routes and Calculate Route Time and Distance on the Fly Using Google Map API V3

Introduction

 

This article will help you to solve the following problems:

1. How to draw a route on the fly.
2. How to delete a location from a route on the fly.
3. How to swap the routes on Google Maps using an HTML table.
4. How to calculate route distance and time with respect to speed.

I have used waypoints to draw the routes. Please note that you can use a maximum of 10 locations at a time. In this article, I have made all necessary JavaScript code comments in the "googlemap.js" JavaScript file. So I am not explaining the JavaScript code. Please download the attachment for more details about code. 

 

Procedure

 

Use the following procedure to draw a route on the fly:

1. Run the project.
2. Double-click on the start location on the Google map.
    
    
   Here I have chosen Mumbai as the starting location.
    
   
3. You can choose the second location by double-clicking on another location on the map or drag the "B" icon to the second location.
    
    
   Here I have chosen Pune as my second location.
    
4. You can choose another location by double-clicking on the map.
    
    
   Here I have chosen Hyderabad as my third location.
    
5. Notice that when you click on the map, the table will automatically generate the latitude, longitude, distance and time.
6. Toe calculate the time, you need to enter the speed in the TextBox.

Code

 

1. Initialize the map on page load

//You can calculate directions (using a variety of methods of transportation) by using the DirectionsService object.
var directionsService = new google.maps.DirectionsService();
//Define a variable with all map points.
var _mapPoints = new Array();
//Define a DirectionsRenderer variable.
var _directionsRenderer = '';
//InitializeMap() function is used to initialize google map on page load.
function InitializeMap() {
    //DirectionsRenderer() is a used to render the direction
    _directionsRenderer = new google.maps.DirectionsRenderer();
    //Set the your own options for map.
    var myOptions = {
        zoom: 6,
        center: new google.maps.LatLng(21.7679, 78.8718),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //Define the map.
    var map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
    //Set the map for directionsRenderer
    _directionsRenderer.setMap(map);
    //Set different options for DirectionsRenderer mehtods.
    //draggable option will used to drag the route.
    _directionsRenderer.setOptions({
        draggable: true
    });
    //Add the doubel click event to map.
    google.maps.event.addListener(map, "dblclick", function (event) {
        //Check if Avg Speed value is enter.
        if ($("#txtAvgSpeed").val() == '') {
            alert("Please enter the Average Speed (km/hr).");
            $("#txtAvgSpeed").focus();
            return false;
        }
        var _currentPoints = event.latLng;
        _mapPoints.push(_currentPoints);
        getRoutePointsAndWaypoints();
    });
    //Add an event to route direction. This will fire when the direction is changed.
    google.maps.event.addListener(_directionsRenderer, 'directions_changed', function () {
        computeTotalDistanceforRoute(_directionsRenderer.directions);
    });
}

2. Get the route points and waypoints

//getRoutePointsAndWaypoints() will help you to pass points and waypoints to drawRoute() function
function getRoutePointsAndWaypoints() {
    //Define a variable for waypoints.
    var _waypoints = new Array();
    if (_mapPoints.length > 2) //Waypoints will be come.
    {
        for (var j = 1; j < _mapPoints.length - 1; j++) {
            var address = _mapPoints[j];
            if (address !== "") {
                _waypoints.push({
                    location: address,
                    stopover: true  //stopover is used to show marker on map for waypoints
                });
            }
        }
        //Call a drawRoute() function
        drawRoute(_mapPoints[0], _mapPoints[_mapPoints.length - 1], _waypoints);
    } else if (_mapPoints.length > 1) {
        //Call a drawRoute() function only for start and end locations
        drawRoute(_mapPoints[_mapPoints.length - 2], _mapPoints[_mapPoints.length - 1], _waypoints);
    } else {
        //Call a drawRoute() function only for one point as start and end locations.
        drawRoute(_mapPoints[_mapPoints.length - 1], _mapPoints[_mapPoints.length - 1], _waypoints);
    }
}

3. Draw the route

 

The following function is used to draw the route.

//drawRoute() will help actual draw the route on map.
    function drawRoute(originAddress, destinationAddress, _waypoints) {
        //Define a request variable for route .
        var _request = '';
        //This is for more then two locatins
        if (_waypoints.length > 0) {
            _request = {
                origin: originAddress,
                destination: destinationAddress,
                waypoints: _waypoints, //an array of waypoints
                optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
        } else {
            //This is for one or two locations. Here noway point is used.
            _request = {
                origin: originAddress,
                destination: destinationAddress,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
        }
        //This will take the request and draw the route and return response and status as output
        directionsService.route(_request, function (_response, _status) {
            if (_status == google.maps.DirectionsStatus.OK) {
                _directionsRenderer.setDirections(_response);
            }
        });
    }

How to delete a location from the route on the fly

1. If I want to delete the Pune location form the example above then I click on the "X" image button to delete the location.

    

    
2. When you click on the "Ok" button, the "Pune" or "B" location will be deleted.

    

    

Code

 

1. The following is the code to delete the required location:

//This will useful to delete the location
    function deleteLocation(trid) {
        if (confirm("Are you sure want to delete this location?") == true) {
            var _temPoint = new Array();
            for (var w = 0; w < _mapPoints.length; w++) {
                if (trid != w + 1) {
                    _temPoint.push(_mapPoints[w]);
                }
            }
            _mapPoints = new Array();
            for (var y = 0; y < _temPoint.length; y++) {
                _mapPoints.push(_temPoint[y]);
            }
            getRoutePointsAndWaypoints();
        } else {
            return false;
        }
    }

2. I have called the deleteLocation() method on image click on click event.

 

htmlhtml = html + "<td style=\"width: 60px;\"><img alt=\"DeleteLocation\" src=\"Images/Delete.jpg\" onclick=\"return deleteLocation(" + _htmlTrCount + ");\" /></td>";

How to swap the routes on Google map using HTML table

 

1. In the example above, I have created three locations, they are Mumbai, Pune, and Hyderabad.

 

 

2. Now I want to swap the locations, in other words, my start locations will be Hyderabad, then Pune, then Mumbai.

 

3. Put the mouse on the third row of the table or the "Location Name: C" table row and then drag and drop to the first row, in other words the first row or "Location Name: A".

 

 

4. So my start location is "A", in other words, Hyderabad. Now the second location will be Pune. Right now it is showing Mumbai. Do the same for Mumbai.

 

 

Code

 

1. The following code will help you to move the locations from the HTML table:

//This will useful to swap rows the location
    function draganddrophtmltablerows() {
        var _tempPoints = new Array();
        // Initialise the first table (as before)
        $("#HtmlTable").tableDnD();
        // Initialise the second table specifying a dragClass and an onDrop function that will display an alert
        $("#HtmlTable").tableDnD({
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                for (var q = 0; q < rows.length; q++) {
                    _tempPoints.push(_mapPoints[rows[q].id - 1]);
                }
                _mapPoints = new Array();
                for (var y = 0; y < _tempPoints.length; y++) {
                    _mapPoints.push(_tempPoints[y]);
                }
                getRoutePointsAndWaypoints();
            }
        });

2. I have used the Scripts/jquery.tablednd.js for this table swap.

 

Calculate route distance and time with respect to speed

 

The following procedure will calculate the route distance and time with respect to speed.

 

1. When you create a location on the map, the distance and speed will automatically be calculated.

 

 

2. For speed, you need to enter the "Average Speed (km/hr)" in the text box.

 

Code

//CreateHTMTable() will help you to create a dynamic html table
    function CreateHTMTable(_latlng, _distance) {
        var _Speed = $("#txtAvgSpeed").val();
        var _Time = parseInt(((_distance / 1000) / _Speed) * 60);;
        if (_htmlTrCount - 1 == 0) {
            _Time = 0;
            _distance = 0;
        }
        var html = '';
        var title = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O");
        html = html + "<tr id=\"" + _htmlTrCount + "\">";
        html = html + "<td style=\"width: 80px;\">" + _htmlTrCount + "</td>";
        html = html + "<td style=\"width: 80px;\"><span id=\"Title_" + _htmlTrCount + "\">" + title[_htmlTrCount - 1] + "</span></td>";
        html = html + "<td style=\"width: 100px;\"><span id=\"lat_" + _htmlTrCount + "\">" + parent.String(_latlng).split(",")[0].substring(1, 8) + "</span></td>";
        html = html + "<td style=\"width: 100px;\"><span id=\"lng_" + _htmlTrCount + "\">" + parent.String(_latlng).split(",")[1].substring(1, 8) + "</span></td>";
        html = html + "<td style=\"width: 100px;\"><span id=\"dir_" + _htmlTrCount + "\">" + _distance + "</span></td>";
        html = html + "<td style=\"width: 70px;\"><span id=\"time_" + _htmlTrCount + "\">" + _Time + "</span></td>";
        html = html + "<td style=\"width: 60px;\"><img alt=\"DeleteLocation\" src=\"Images/Delete.jpg\" onclick=\"return deleteLocation(" + _htmlTrCount + ");\" /></td>";
        html = html + "</tr>";
        $("#HtmlTable").append(html);
        draganddrophtmltablerows();
    }

The following code will help you to calculate distance and speed.

NOTE:

1. As I already mentioned at the top of this article, I have used the waypoints to plot the route. So you can use a maximum of 10 waypoints with the free one.
2. To better understand, download the source code in the attachment and run it to test it.
3. I have used the Google map API v3 for this article.
4. Please comment on this article for better improvement and I hope you enjoy the article.