Hello Folks
Today i am going to present an article, which will read two inputs from the users (i.e source and destination) and gives the directions on Google maps. Its very easy to make use of such cutting edge technologies that gives success to your small business. This code is available is code.google.com , i am just modifying it according to my specification.
directions.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”ISO-8859-1″>
<title>Directions</title>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<style type=”text/css”>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100%; }
</style>
<script type=”text/javascript”
src=”http://maps.google.com/maps/api/js?sensor=true”>
</script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(“directionsPanel”));
}function calcRoute() {
initialize();
var start = document.getElementById(“txt_from”).value;
var end = document.getElementById(“txt_to”).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);
}
});
}</script>
</head>
<body>
<div id=”txt_inputs”>
<input type=”text” value=”FROM” id=”txt_from”/>
<input type=”text” value=”TO” id=”txt_to”/>
<input type=”button” value=”LOCATE” id=”btn_locate” onclick=”calcRoute();”/>
</div>
<div id=”map_canvas” style=”float:left;width:70%; height:100%”></div>
<div id=”directionsPanel” style=”float:right;width:30%;height 100%”></div>
</body>
</html>
This is simple html page where you need to add javascript, and you need to load google maps javascript library.
Here are the steps you need to follow:
1. Create HTML page then inside <head></head> tag, write all javascripts.
2. Firstly, write the below code.
<script type=”text/javascript” src= “http://maps.google.com/maps/api/js?sensor=true”>
This code will load js library for google maps(v3)
3. var directionsService = new google.maps.DirectionsService();
This code will create a “DirectionService” object from google maps
4. initialize() function will initialize google maps and displays on browser.
Details about initialize function()
i. var myLatlng = new google.maps.LatLng(-34.397, 150.644);
this will create object of LatLong values that is used to point a map to particular area.
ii. var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center:chicago
}
myOption is object literal, To initialize a Map, we first create a Map options object to contain map initialization variables.
iii . map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
Here, map is an object of class Maps, which is the class of Google Maps which responsible for creating map instance.
Here we are passing myOption object which contains where to spot the map(i.e location of map to be displayed)
iv. Next will load map to div element
5. calcRoute() function will get you the directions and detailed information
i. var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
This code will create an object literal that contains information about the start and endpoint information
ii. directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
This function will fetch the directions from start point to end point along with the directions
6. By this you are done with it. Enjoy HAPPY CODING 
.