How to route multipoint addresses + pub transit

gistfile1.txt

We have code that takes an array of addresses and then determines routes between them using the Google Maps API, all in Javascript. It works roughly like this:


var eventArray = ["1062 W. Webster Avenue", "222 Merchandise Mart Plaza", "Midway International Airport"]
var directions = [];

while (eventArray.length > 1) { // Stop running when we have less than two addresses to route btwn

    var start = eventArray[0]; // start is the first address in our array
    var end = eventArray[1]; // end is the next address in the array

    // the google maps route api stuff runs here
    ... // sparing you from the full api call here

    // we capture the Google Route JSON response– this is the start/end addresses, 
    // driving/bike/transit/walk directions, and map objects
    directionsService.route(request, function (response, status) {
    	// each time we run the while loop, we get directions between two addresses and 
    	// store the response.
    	directions.push(response) 

	  eventArray.shift(); // remove the first address for the next loop cycle
	  // Now when the loop runs again, "1047 W. Webster Avenue" has been removed from the array.
}

This all works as expected, we have multiple Google Map route responses saved as JSON. Cool.

The problem is when we try to render those responses into a map with visual routes and step-by-step directions. The Javascript method that Google provides to do this:

DirectionsRenderer

...can unfortunately only render a single set of directions, between two addresses. So while we have multiple route objects, we can't actually display them. Google says if you do not use the provided DirectionsRenderer object, you must handle and display this information yourself.  

This is where we need help devising a strategy to display our multipoint routes. Possible solutions in my head:
 * Unpack the Google Route JSON object ourselves and handle the polygon drawing of the map as well as outputting the step-by-step directions, all eventually being spit as HTML. This sounds hard.
 * Greg suggested using Ajax to render buttons for each route; only a single map/step-by-step direction is displayed at a time. When you click the button for a different leg, the DOM is updated with the new map/step-by-step directions. This might be a problem ultimately displaying on a phone, which we really want to do (maybe we abandon that and focus on desktop only for now...)
 * Create some kind of crazy recursive generator that grabs all Google Route responses, and then spews out the Google Maps Javascript functions for *each* object, thus adding different DOM elements that can be updated with it's newly created, associated route JS function. This is probably easier to explain in person.
 * Abandon Google Maps entirely and look at an alternative like MapQuest, or one of the alternatives listed here: http://wiki.openstreetmap.org/wiki/Routing/online_routers#comparison_matrix