How can I specify Google map with driving direction in jQuery mobile - google-maps

Question

I have done a Google Maps based application in PhoneGap (jQuery mobile). The task is to connect the starting and finishing locations. I am able to link these points by using marker and polyline technique. I can get only a straight line which is connecting both. But, I want to link the two locations via the driving path between these two locations. Like the marked area from the map below. Please help me on this.
I have my code here: http://jsfiddle.net/rajmathan/NALA5/
Update: I also find a code in ActionScript with the same functionality.But,I do not know how to use this in mycode
var directionOptions:DirectionsOptions = new DirectionsOptions({language: 'en',countryCode: 'US,DE',travelMode: DirectionsOptions.TRAVEL_MODE_DRIVING});

Answer 1

<script>
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
function onSuccess(position) {
var vLatitude = 18.9750;
var vLongitude = 72.8258;
var cur_lat = position.coords.latitude;
var cur_lng = position.coords.longitude;
var start = cur_lat+","+cur_lng;
var end = vLatitude+","+vLongitude;
var url = 'https://maps.google.com/?saddr='+start+'&daddr='+end;
location.href = url;
}
function onError(error)
{
alert((error.code)
}
</script>
If you are working with PhoneGap , you should install InAppBrowser and open url like this.. instead of location.href
var ref = window.open(url, 'random_string', 'location=no');
OR
You can also do with...
HTML
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="width:100%; margin:0px 0px 0 0px; float:left;">
<div id="map_canvas" style="width:100%;height:250px; position:relative; bottom:5px;top:5px;"></div>
</div>
<div class="restaurant_block_content" id="tGetDirection"></div>
JAVASCRIPT
var cur_lat = "";
var cur_lng = ""
var vLatitude = "";
var vLongitude = "";
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
var start = '23.0300, 72.5800';
var end = '18.9750, 72.8258';
//var start = cur_lat+","+cur_lng;
// var end = vLatitude+","+vLongitude;
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);
var myRoute = response.routes[0];
/* instructions */
var txtDir = '<div><strong>Total Distance : '+myRoute.legs[0].distance.text+'</strong></div><div><strong>Total Duration : '+myRoute.legs[0].duration.text+'</strong></div><ol>';
for (var i=0; i<myRoute.legs[0].steps.length; i++) {
if(myRoute.legs[0].steps[i].maneuver.length > 0)
maneuver = '<img src="img/'+myRoute.legs[0].steps[i].maneuver+'.png" style="margin-right:10px;width:12px; height:12px;" >'
else
maneuver = "";
txtDir += '<li>'+maneuver+myRoute.legs[0].steps[i].instructions+' <br><strong style="float:right;">'+myRoute.legs[0].steps[i].distance.text+'</strong></li>';
//alert(myRoute.legs[0].steps[i].maneuver.length)
//google.maps.geometry.encoding.decodePath(myRoute.legs[0].steps[i].polyline.points)straight
}
txtDir += '</ol>';
document.getElementById('tGetDirection').innerHTML = txtDir;
$('#tGetDirection').show();
$.mobile.hidePageLoadingMsg();
}
});
}