Google Directions Service with Waypoints not working - google-maps

Question

Here is my code for displaying waypoints with google directions:-
// Show Route (-)
if (e.keyCode == 109 && $("#booking-docket").dialog("isOpen")) {
var pickup = $('#txt-pickup-lat-long').val();
var pickupLat = pickup.split(",")[0];
var pickupLng = pickup.split(",")[1];
var destination = $('#txt-destination-lat-long').val();
var destinationLat = destination.split(",")[0];
var destinationLng = destination.split(",")[1];
var via = $('#txt-via-lat-long').val();
var viaLat = via.split(",")[0];
var viaLng = via.split(",")[1];
var start = new google.maps.LatLng(parseFloat(pickupLat), parseFloat(pickupLng));
var end = new google.maps.LatLng(parseFloat(destinationLat), parseFloat(destinationLng));
var waypts = new google.maps.LatLng(parseFloat(viaLat), parseFloat(viaLng));
var request = {
origin:start,
destination:end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
It worked perfectly fine until I added the waypoint in, not sure why but nothing happens now when I try to show the route, any ideas?

Answer 1

Your original example could be changed like:
//var waypts = new google.maps.LatLng(parseFloat(viaLat), parseFloat(viaLng));
var request = {
origin:start,
destination:end,
waypoints: [{
location: new google.maps.LatLng(parseFloat(viaLat), parseFloat(viaLng)),
stopover: false
}],
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};