Add required JS:
<script src="script/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var map;
var RouteCoordinates = [];
var Routes = [];
var RouteColor = ["#0094ff", "#479f67", "#3c9a94", "#a17b4b",
"#4ad98a", "#50cfe1", "#8ad3a4", "#40cbf1",
"#5ecf98", "#17c31f"];
var DrivePath, ResLocInterval;
var directionsService = new google.maps.DirectionsService();
$(document).ready(function () {
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(40.748492,
-73.985496),
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#btnGetDirections").click(function () {
calcRoute($("#txtAddress1").val(), $("#txtAddress2").val(), 'Root1');
});
$("#btnGetDirections1").click(function () {
calcRoute($("#txtAddress11").val(), $("#txtAddress22").val(), 'Root2');
});
});
function
calcRoute(start, end, FromRes) {
for (var i = 0; i < Routes.length; i++) {
if (Routes[i].Title == FromRes) {
if (Routes[i].PolyLine != null || Routes[i].PolyLine != undefined)
{
Routes[i].PolyLine.setMap(null);
Routes[i].PolyLine = null;
clearInterval(Routes[i].Interval);
Routes[i].Direction.setMap(null);
}
Routes.splice(i, 1);
break;
}
}
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
polylineOptions: { strokeColor: "#6666FF", strokeOpacity: 0.4, strokeWeight: 5 },
markerOptions: { title: FromRes }
});
var objRoute = new Object();
objRoute.Title =
FromRes;
objRoute.PolyLine = null;
objRoute.Interval = null;
objRoute.OffSetCnt = 0;
objRoute.Direction = directionsDisplay;
Routes.push(objRoute);
google.maps.event.addListener(directionsDisplay, 'directions_changed', function (e) {
ShowPolyLine(directionsDisplay.getDirections(),
directionsDisplay.markerOptions.title);
});
var request = {
origin:
start,
destination:
end,
travelMode:
google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true
};
directionsService.route(request,
function (result, status) {
if (status ==
google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
function
ShowPolyLine(result, Title) {
RouteCoordinates
= [];
for (var i = 0; i <
result.routes[0].overview_path.length; i++) {
RouteCoordinates.push(new
google.maps.LatLng(result.routes[0].overview_path[i].lat(),
result.routes[0].overview_path[i].lng()))
}
var Filter = $(Routes).filter(function () {
return this.Title == Title;
});
if (Filter.length > 0) {
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale:
3,
fillColor: '#FF0000',
fillOpacity: 0.7,
strokeColor: '#FF0000',
strokeOpacity: 0.7,
strokeWeight: 4
};
if (Filter[0].PolyLine != null || Filter[0].PolyLine != undefined)
{
Filter[0].PolyLine.setPath(RouteCoordinates);
clearInterval(Filter[0].Interval);
}
else {
Filter[0].PolyLine = new google.maps.Polyline({
map:
map,
path: RouteCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
geodesic: true,
strokeColor: RouteColor[Math.random().toString().substr(5, 1)],
strokeOpacity: 1.0,
strokeWeight: 5
});
}
Filter[0].Interval = window.setInterval(function () {
Filter[0].OffSetCnt = (Filter[0].OffSetCnt + 1) % 4000;
var icons = Filter[0].PolyLine.get('icons');
icons[0].offset = (Filter[0].OffSetCnt / 40) + '%';
Filter[0].PolyLine.set('icons', icons);
}, 100);
}
}
</script>
<style>
html, body, form {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 80%;
height: 100%;
float: left;
}
</style>
HTML
<div id="map_canvas"></div>
<div style="width: 20%; float: right;">
<input type="text" placeholder="From" id="txtAddress1" value="23.026126, 72.547248" /><br />
<input type="text" placeholder="To" id="txtAddress2" value="23.039496, 72.554963" /><br />
<input type="button" value="Get" id="btnGetDirections" /><br />
<input type="text" placeholder="From" id="txtAddress11" value="23.027054, 72.544780" /><br />
<input type="text" placeholder="To" id="txtAddress22" value="23.029088, 72.551282" /><br />
<input type="button" value="Get" id="btnGetDirections1" />
</div>
Check Result
