In this article, I have explained how to calculate route on google map
between two points. For this I have taken two text boxes and one button on the
page. Enter the two points name or latitude and longitude values and click the
button then it will show the path on map.
JS code for calculating
Route:-
<script>
var
directionsDisplay;
var directionsService
= new google.maps.DirectionsService();
function
InitializeMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var
latlng = new google.maps.LatLng(12.917354, 77.622064);
var
myOptions =
{
zoom: 8,
center: latlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
var map
= new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
}
function
calcRoute() {
var
start = document.getElementById('startvalue').value;
var end
= document.getElementById('endvalue').value;
var
request = {
origin: start,
destination: end,
travelMode:
google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if
(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function
Button1_onclick() {
calcRoute();
}
</script>
Full coding with JS and Html:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var
directionsDisplay;
var directionsService
= new google.maps.DirectionsService();
function
InitializeMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var
latlng = new google.maps.LatLng(12.917354, 77.622064);
var
myOptions =
{
zoom: 8,
center: latlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
var map
= new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
}
function
calcRoute() {
var
start = document.getElementById('startvalue').value;
var end
= document.getElementById('endvalue').value;
var
request = {
origin: start,
destination: end,
travelMode:
google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if
(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function
Button1_onclick() {
calcRoute();
}
</script>
</head>
<body onload = "InitializeMap()">
<table id ="control">
<tr>
<td>
<table>
<tr>
<td>From:
</td>
<td>
<input id="startvalue" type="text" style="width: 305px" /></td>
</tr>
<tr>
<td>To:</td>
<td><input id="endvalue"
type="text"
style="width:
301px" /></td>
</tr>
<tr>
<td align ="right">
<input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign ="top">
<div id ="map"
style="height:
390px; width: 489px"></div>
</td>
</tr>
</table>
</body>
</html>
