var directionDisplay;
var directionsService = new google.maps.DirectionsService(); //Create a DirectionsService object which is required to communicate with the Google Maps API Direction Service
var map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer(); //Create a DirectionsRenderer object to render the directions results
var center = new google.maps.LatLng(0, 0); //Map is centered at 0,0
var myOptions =
{
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
var start = "Pune"; //Set the source/ origin
var end = "Mumbai"; //Set the destination
var request =
{
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING //Current travel mode is DRIVING. You can change to BICYCLING or WALKING and see the changes.
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK) //Check if request is successful.
{
directionsDisplay.setDirections(response); //Display the directions result
}
});
}
<html>
<head>
<title>Google Maps API v3 Example: Directions Simple</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!-- Copy the javascript code here if you wish to try this code. -->
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 400px; width: 400px"></div>
</body>
</html>