Google maps API - adding multiple destinations not working (google directions)

Question

I am having trouble creating/replicating the google maps directions function. I am able to get it working fine when I have a From/To field but as soon as I try to add multiple d

Answer 1

This is how I have handled multiple way point directions.

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

var renderOptions = { draggable: true };
var directionDisplay = new google.maps.DirectionsRenderer(renderOptions);

//set the directions display service to the map
directionDisplay.setMap(map);
//set the directions display panel
//panel is usually just and empty div.  
//This is where the turn by turn directions appear.
directionDisplay.setPanel(directionsPanel); 

//build the waypoints
//free api allows a max of 9 total stops including the start and end address
//premier allows a total of 25 stops. 
var items = ["address 1", "address 2", "address 3"];
var waypoints = [];
for (var i = 0; i < items.length; i++) {
    var address = items[i];
    if (address !== "") {
        waypoints.push({
            location: address,
            stopover: true
        });
    }
}

//set the starting address and destination address
var originAddress = "starting address";
var destinationAddress = "destination address";

//build directions request
var request = {
            origin: originAddress,
            destination: destinationAddress,
            waypoints: waypoints, //an array of waypoints
            optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

//get the route from the directions service
directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionDisplay.setDirections(response);
    }
    else {
        //handle error
    }
});