Google Directions Service with Waypoints not working

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
};