Google Maps Part 2: Implementing Driving Directions & Roadmaps

In this series of Google Maps tutorials we will implement the driving directions and roadmaps on Google maps. If you do not know how to implement Google Maps, read this tutorial. In this tutorials I have covered all the options of Google driving directions like ‘Directions Panel’, ‘Waypoints’ and ‘Draggable directions’. See the demo here.

Download Script

Simple Demo

Google Map with Directions Panel

Google Map with Waypoints

Google Map with Draggable Directions

Implementing Driving Directions in Google Maps

Following function creates the driving directions on Google maps. This function takes three arguments: starting location, end locations and the driving mode. Driving mode can take any value out of the following options:

  • DRIVING 
  • WALKING 
  • BICYCLING
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

function calcRoute(start, end, mode) {
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[mode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
/*Set the directions on the map*/
directionsDisplay.setMap(map);
}

Implementing Directions Panel in Google Maps

To show the directions panel you need to add following line in the end of the above function:

directionsDisplay.setPanel(document.getElementById("directions"));

So our function now looks like:

function calcRoute(start, end, mode) {
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[mode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
directionsDisplay.setMap(map);

/*Show directions panel*/
directionsDisplay.setPanel(document.getElementById("directions"));
}

Implementing Directions Way Points in Google Maps

If you want to show the way points in the driving directions, just add the waypoint locations in the directionsService onject. See the following function:

function calcRoute(start, end, mode) {
var request = {
origin:start,
destination:end,
waypoints:[{location: "bhopal"}, {location: "indore"}],/*Show the waypoints*/
travelMode: google.maps.TravelMode[mode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}

Implementing Draggable Directions in Google Maps

To make the directions draggable, we need to set the ‘draggable’ property of our DirectionsRenderer to true. See how its done:

var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Complete Implementation

<!DOCTYPE html>
<html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;

/*Options for making draggable direction*/
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();

jQuery(document).ready(function(){
function initialize() {
var delhi = new google.maps.LatLng(28.635308, 77.22496);

var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: delhi
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

/*Function for creating the roadmap*/
function calcRoute(start, end, mode) {
var request = {
origin:start,
destination:end,
waypoints:[{location: "bhopal"}, {location: "indore"}],
travelMode: google.maps.TravelMode[mode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}

initialize();
calcRoute('New Delhi', 'Mumbai', 'DRIVING');

jQuery('#driveit').click(function(){
var srcAddr = jQuery('#from').val();
var destAddr = jQuery('#to').val();
var mode = jQuery('#mode').val();
calcRoute(srcAddr, destAddr, mode);
});
});
</script>
</head>
<body>
<h2>Google Map with Draggable directions</h2>
<div class="googlemap">
<div id="map_area">
<div id="map_canvas"></div>
<div class="text">
<br />
From <input type="text" id="from" value="New Delhi" />
To <input type="text" id="to" value="Mumbai" />
Travel Mode
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking </option>
<option value="BICYCLING">Bicycling </option>
</select>
<input type="button" value="Show Route" id="driveit" />
</div>
</div>
<div id="directions"></div>
</div>
<?php

?>
</body>
</html>

A bit of CSS

 body{
font-family:Sans-serif;
font-size:12px;
}
h2{border-bottom: 1px dotted;}
.googlemap{
margin: auto;
padding: 0;
width: 100%;
}
#map_area{
float:left;
width:70%;
height:80%;
}
#directions{
float:right;
width:30%;
height:80%;
}
#map_canvas{
margin: auto;
width: 750px;
height: 550px;
border:2px double #ececec;
padding:10px;
}
div.text{
margin: auto;
text-align:center;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

5 thoughts on “Google Maps Part 2: Implementing Driving Directions & Roadmaps

  1. Hi dude i was trying ti implement this coading in mi siteGoogle Maps Part 2: Implementing Driving Directions & Roadmaps,but its not displying the map….It displays only layout not the map….can u help in fix this issue

  2. Thanks Arvind! This worked great for me, I’m implementing it on my site, but first I’m testing on a beta demo site, I will let you know when it’s done so you can check it out.

Comments are closed.