The complete page source of what we describe here can be found near the end of this write-up.&nbsp;&nbsp; Live demo is also provided here <a href="http://demo.kahimyang.info/cgi-cpp/hdirections.html" class="news_link" title="Live demo" target="_blank">http://demo.kahimyang.info/cgi-cpp/hdirections.html</a>.&nbsp;&nbsp; This demonstration and the live demo use two panes,&nbsp; the map pane and the textual directions frame that is hidden initially until a direction response is returned successfully by the API which also resizes the map canvas.



Let us start by loading the Google Map version 3 JavaScript API.



<pre class="brush: js">
&lt;script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&language=ja">
&lt;/script>
</pre>



language parameter is optional but is useful if you want the result displayed to a language of your choice (other than the browser 

default).&nbsp;&nbsp; You can also use the region parameter to avail of region biasing.&nbsp;&nbsp;A region with a value of jp for 

example will interprete the start and destination values as Japanese locations.



Next,&nbsp;we create DirectionsRenderer and Map objects.&nbsp;&nbsp;Please see the inline comments for descriptions.



<pre class="brush: js">
// Our directions renderer and Google Map
var map;
var directionsDisplay;

function initialize() {
 // Make the route draggable
 var rendererOptions = {
 draggable: true
 }
 // Create the DirectionsRenderer object
 directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

 // Center map to this LatLang
 var manila = new google.maps.LatLng(14.5833, 121.0000);
 var mapOptions = {
 zoom:9,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 center: manila
 }

 // Create map object with the above options to a div element in the page
 // of id of map_canvass and bind this map to the DirectionsRenderer object
 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 directionsDisplay.setMap(map);

 // The div where the textual directions are displayed. This is hidden
 // initially
 directionsDisplay.setPanel(document.getElementById("directionsPanel"));

}
</pre> 


<h3>
Submitting the request
</h3>


To submit a request create an object of type DirectionsService (please consult the documentation for more options).&nbsp;&nbsp; Call 

DirectionsService.route() to initiate a request to the Directions service, passing it a DirectionsRequest object containing options and a callback 

method to execute upon receipt of the response. 



<pre class="brush: js;highlight:9">

var directionsService = new google.maps.DirectionsService();

function calcRoute(start, end) {
 
 // JSON request options
 var request = {
 origin: start,
 destination: end,
 provideRouteAlternatives: true,
 travelMode: google.maps.TravelMode.DRIVING
 };

 // The request call
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 
 // Resize the map canvas to accomodate
 // the textual directions panel
 
 map_canvas.style.width='70%';
 directionsPanel.style.display='inline'; 

 // Request map resize
 google.maps.event.trigger(map, "resize");

 // Display the reponse
 directionsDisplay.setDirections(response);
 }
 else {
 // You may want to handle other return values. Please
 // see the documentation for the other values.
 alert ('An error has occurred !');
 }
 });
}

</pre>



response is of type <a href="https://developers.google.com/maps/documentation/javascript/directions#DirectionsResults" target="_blank" 

class="news_link" title="DirectionsResult">DirectionsResult</a> with a single member, an array of routes of type DirectionsRoute. Use routes 

[] if you want to dig more into the results. The number of routes (length of array) is controlled by provideRouteAlternatives option. If 

provideRouteAlternatives is set to false (line 9 above), only one route is returned otherwise, results may contain more than one routes. 



Parameters to calcRoute() are values of HTML text input elements of the controls.&nbsp;&nbsp; Please see the HTML body below.


<h3>
The HTML page
</h3>


<pre class="brush: xml;highlight[8,16]">
&lt;body>
 &lt;!-- The controls is a floating frame near the 
 bottom of map
 --> 
 &lt;span id="controls">
 &lt;input id="start" placeholder="Start" />
 &lt;input id="end" placeholder="Destination" /> 
 &lt;button onclick="showDirectionsPanelandCalculate();return false">
 Get directions
 &lt;/button> 
 &lt;/span>
 &lt;!-- Map canvas -->
 &lt;div id="map_canvas"></div> 
 &lt;!-- Directions in text -->
 &lt;div id="directionsPanel"> 
 &lt;button onclick="hideDirectionsPanel();return false;">Hide&lt;/button>
 &lt;/div> 
&lt;/body>
</pre>



showDirectionsPanelandCalculate() in line 8, is a support function that calls calcRoute(start, end).&nbsp;&nbsp; hideDirectionsPanel() (line 16) 

hides the text panel and resizes the map canvas.&nbsp;&nbsp; See the complete page source below for more of those functions.


<h3>
The complete page
</h3>


<pre class="brush: xml;collapse: true">
&lt;!DOCTYPE html>
&lt;html>
 &lt;head>
 &lt;title>Google Directions&lt;/title>
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 &lt;script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false">
 &lt;/script>

 &lt;script type="text/javascript">
 var map;
 var directionsDisplay;
 var directionsService = new google.maps.DirectionsService();

 function initialize() {
 // Make the route draggable
 var rendererOptions = {
 draggable: true
 } 
 directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
 var manila = new google.maps.LatLng(14.5833, 121.0000);
 var mapOptions = {
 zoom:9,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 center: manila
 }
 map = 
 new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 }
 
 function calcRoute(start, end) {

 var request = {
 origin:start,
 destination:end,
 provideRouteAlternatives: true,
 travelMode: google.maps.TravelMode.DRIVING
 };
 
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) { 
 
 // Resize the map canvas to accomodate
 // the textual directions panel
 map_canvas.style.width='70%';
 directionsPanel.style.display='inline'; 
 // Request map resize.
 google.maps.event.trigger(map, "resize");
 
 // display the directions
 directionsDisplay.setDirections(response);
 }
 else { 
 alert ('An error has occurred !'); 
 }

 }); 
 }
 
 /*
 * Show the textual directions panel, resize the map canvas
 * trigger resize event on map, and compute the directions 
 * Note that start and end corresponds to the input id of
 * the controls
 */
 function showDirectionsPanelandCalculate () { 
 if (start.value.length==0 || end.value.length==0) {
 return;
 } 
 calcRoute (start.value,end.value);
 
 }
 
 /*
 * Hide the textual directions panel resize map
 * canvas to original size, trigger resize on
 * map. You can also recalculate directions if
 * desired.
 */
 function hideDirectionsPanel () {
 
 map_canvas.style.width='100%';
 directionsPanel.style.display='none';
 google.maps.event.trigger(map, "resize");

 } 
 
 google.maps.event.addDomListener(window, 'load', initialize);
 
 &lt;/script> 

 &lt;style>
 body {
 width:950px;
 }
 /* Controls that takes the start/end address.
 */
 #controls {
 background-color: lightgray;
 font-size: 11px;
 position:fixed;
 bottom:-0px;
 margin-bottom: 20px;
 left:5px;border:1px solid darkgray;
 padding:5px;
 z-index:10000;
 }
 /* Map canvas */
 #map_canvas {
 float:left;
 width:100%; 
 height:700px; 
 }

 /* Textual directions frame */
 #directionsPanel {
 float:right;
 display: none;
 width:29%;
 height: 700px;
 font-size: 12px; 
 margin-left: 2px;
 overflow: scroll;
 }
 &lt;/style>
 &lt;/head>

 &lt;body>
 &lt;!-- 
 The controls are in a floating frame near the 
 bottom of map
 --> 
 &lt;span id="controls">
 &lt;input id="start" placeholder="Start" />
 &lt;input id="end" placeholder="Destination" /> 
 &lt;button onclick="showDirectionsPanelandCalculate();return false">
 Get directions
 &lt;/button> 
 &lt;/span>
 &lt;!-- Map canvas -->
 &lt;div id="map_canvas">&lt;/div> 
 &lt;!-- Directions in text -->
 &lt;div id="directionsPanel"> 
 &lt;button onclick="hideDirectionsPanel();return false;">Hide&lt;/button>
 &lt;/div> 
 &lt;/body>
&lt;/html>

</pre>



If you find this code helpful and wanted to use it in your project, just copy the code above and then tailor it more to your needs.



That's it Good Luck.

Using Google Map directions in HTML pages