How to made route From Location to To Location in Google map ?

First you have to add the js in the header section you can download js from the here.also add senssor mapseeting the jquery-1.9.1.min.js commen js. then add the script for the map.code here


var directionsDisplay;

var map;


function initialize() {

directionsDisplay = new google.maps.DirectionsRenderer();

var ahmedabad = new google.maps.LatLng(41.850033, -87.6500523);

var mapOptions = {

zoom: 7,

center: ahmedabad


map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);




var input1 = (document.getElementById(‘pac-inputstart’));

var autocomplete1 = new google.maps.places.Autocomplete(input1);

autocomplete1.bindTo(‘bounds’, map);


var input2 = (document.getElementById(‘pac-inputend’));

var autocomplete2 = new google.maps.places.Autocomplete(input2);

autocomplete2.bindTo(‘bounds’, map);



function calcRoute() {


var start = document.getElementById(‘pac-inputstart’).value;

var end = document.getElementById(‘pac-inputend’).value;

var request = {

origin: start,

destination: end,

travelMode: google.maps.TravelMode.DRIVING


var directionsService = new google.maps.DirectionsService();

directionsService.route(request, function (response, status) {

if (status == google.maps.DirectionsStatus.OK) {





google.maps.event.addDomListener(window, ‘load’, initialize);



and add the div and textbox

<input id=”pac-inputstart” type=”text” placeholder=”Enter a location” />

<input id=”pac-inputend” type=”text”

placeholder=”Enter a location” />

and display google map div <div  id =”map-canvas”/> after that we can edit this route, for that we have stored From Address and To Address , in edit funcation in we have get data from the database then call the  calcRoute method call and assign value in textbox so what ever value from and to it dispaly route.