Google Maps directions V3: Multiple directions on a map

I am trying to render multiple directions(well, their Polylines, essentially) on a single instance of a map. In the prior version of the maps API, I did something like

//directions[] stores the GDirections objects
//x[] is an array of Elements extracted from an XMLHTTPResponse object
//iterating over the values in x[]
GEvent.addListener(directions[i], "load", function() {
 var polyline = this.getPolyline();
 map.addOverlay(polyline);
 polyline.setStrokeStyle({opacity:0.2})
 });

directions[i].load("from:here to:"+x[i].childNodes[0].nodeValue,{getPolyline:true});

Now that there are DirectionsService and DirectionsRenderer classes, I don't know what are the best practices for doing the same thing. Do I create multiple instances of DirectionsRenderer class and have them do a setMap() to the instance of the main map? Do I create multiple instances of the Direct开发者_如何转开发ionsServices class.

I am very new to javascript and functional languages in general and barely got past trying to understand functional closures as they pertain to callbacks. Apologies for the formatting as well.

Any help will be appreciated, I will try and clarify any points you may raise.

Hey Ephraim, after researching for hours and trying different solutions I came up with this, you need to create different instance of DirectionsRenderer and (this is important!) create the DirectionsService instance INSIDE the response function. This link will guide you to the right direction.

Using the link @ifaour posted, I whipped up a down and dirty demo. Because my purposes called for multiple unique waypoints per directions object, I took that snippet a bit farhter, creating arrays for waypoints: here's the link to the demo…everything's inline. :D

It's a really dirty set of code (I'm intermediate)…by all means, clean it up if you can