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

Mahesh Alle
11y
390k
0
17

Article

This article will help you to solve the following problems:

How to draw a route on the fly.
How to delete a location from a route on the fly.
How to swap the routes on Google Maps using a HTML table.
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:

Run the project.
Double-click on the start location on the Google map.

Here I have chosen Mumbai as the starting location.
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.
You can choose another location by double-clicking on the map.

Here I have chosen Hyderabad as my third location.
Notice that when you click on the map, the table will automatically generate the latitude, longitude, distance and time.
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

If I want to delete the Pune location form the example above then I click on the "X" image button to delete the location.
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.

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

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

//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;\">" + title[_htmlTrCount - 1] + "</td>";

html = html + "<td style=\"width: 100px;\">" + parent.String(_latlng).split(",")[0].substring(1, 8) + "</td>";

html = html + "<td style=\"width: 100px;\">" + parent.String(_latlng).split(",")[1].substring(1, 8) + "</td>";

html = html + "<td style=\"width: 100px;\">" + _distance + "</td>";

html = html + "<td style=\"width: 70px;\">" + _Time + "</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();

}

NOTE:

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.
To better understand, download the source code in the the attachment and run it to test it.
I have used the Google map API v3 for this article.
Please comment on this article for better improvement and I hope you enjoy the article.

Up Next

Ebook Download

View all

JavaScript Interview Q & A

Read by 40 people

Download Now!

Learn

View all