google maps API : how to show driving direction?

Question

Is there any simple solution to fix route function

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

var map;
var digiLocation = { "lat" : "51.597336" , "long" : "-0.109035" };
$(document).ready(function() {
  $("#direction-route").click(function(event){
    event.preventDefault();
    var locationStart = "turnpike lane"
    calcRoute(locationStart)
  });
  var laLatLng;
  initialize();
});
// Set pointer at the middle while resize
google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
function calcRoute(locationStart){
  var request = {
      origin: locationStart, 
      destination:(digiLocation.lat, digiLocation.long),
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      myLatlng.setDirections(response);
    }
  });
}

function initialize() {
    var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long);
    var myOptions = {
        scrollwheel: false,
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [ { "stylers": [{ "saturation": -100 } ]}]
    };
    map = new google.maps.Map(document.getElementById('digi-map'), myOptions);
    marker = new google.maps.Marker({
        position: myLatlng,
        icon: 'img/digi-marker.png',
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/sweetmaanu/qQjeB/

Answer 1

Oh boy, this was full of errors! :-)

1. The way you've setup your code, myLatlng needs global scope, otherwise in function calcRoute it's not available.
2. request.destination:new google.maps.LatLng(digiLocation.lat, digiLocation.long)
3. You never set the directionsDisplay object:
   • directionsDisplay = new google.maps.DirectionsRenderer();
   • directionsDisplay.setMap(map);
4. calcRoute should include this line: directionsDisplay.setDirections(response);

See working fiddle: http://jsfiddle.net/manishie/5fGEZ/

javascript:

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

var map;
var digiLocation = {
    "lat": "51.597336",
        "long": "-0.109035"
};
var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long);

$(document).ready(function () {
    $("#direction-route").click(function (event) {
        event.preventDefault();
        var locationStart = "turnpike lane"
        calcRoute(locationStart)
    });
    var laLatLng;
    initialize();
});
// Set pointer at the middle while resize
google.maps.event.addDomListener(window, "resize", function () {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

function calcRoute(locationStart) {
    var request = {
        origin: locationStart,
        destination: new google.maps.LatLng(digiLocation.lat, digiLocation.long),
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

function initialize() {
    var myOptions = {
        scrollwheel: false,
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            "stylers": [{
                "saturation": -100
            }]
        }]
    };
    map = new google.maps.Map(document.getElementById('digi-map'), myOptions);
    marker = new google.maps.Marker({
        position: myLatlng,
        icon: 'img/digi-marker.png',
        map: map
    });
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);

}
google.maps.event.addDomListener(window, 'load', initialize);