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
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;
}
5 comments
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
You need to tell me the exact code you are using.
Genius! Thanks!
you need to put in jquery file in the same directory
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.
We would love to hear from you...