Google maps API-добавление нескольких направлений не работает (Google directions)

У меня возникли проблемы с созданием / репликацией функции Google maps directions. Я могу заставить его работать нормально, когда у меня есть поле From/To, но как только я пытаюсь добавить несколько направлений, он не работает. Я посмотрел на нас, но я не получаю никаких действительно хороших примеров, показывающих, как это делается. Ниже то, что я сделал до сих пор. Но я уверен, что это сделано очень плохо. Примеры было бы здорово.

<linkhref=http://code.google.com/apis/maps/documentation/javascript/examples/default.css"   rel="stylesheet" type="text/css" />

<script src=http://maps.google.com/maps/api/js?sensor=false&amp;key=xxxxx" type="text/javascript"></script>
<script type="text/javascript">
var intTextBox = 0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
intTextBox = intTextBox + 1;

var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute(

'id', 'strText' + intTextBox);
newTBDiv.innerHTML =

"Text " + intTextBox + ": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);

}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
if (intTextBox != 0) {
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById(

'strText' + intTextBox));
intTextBox = intTextBox - 1;

}

}

var address = '<%= hdnDefault.Value %>'; //Hidden field contains default city London
var rendererOptions = {
draggable:

true
};

var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); ;
var directionsService = new google.maps.DirectionsService();
var map;
var mygc = new google.maps.Geocoder();
mygc.geocode({

'address': address },
function(results, status) {
var country1 = results[0].geometry.location.lat();
var country2 = results[0].geometry.location.lng();
var australia = new google.maps.LatLng(country1, country2);
initialize(australia);

}

);

function initialize(australia) {
var myOptions =
{

zoom: 7,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: australia

};

map =

new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById(

"directionsPanel"));
 google.maps.event.addListener(directionsDisplay,

'directions_changed', function() {
 computeTotalDistance(directionsDisplay.directions);

});

calcRoute();

}

function calcRoute(fromAddress, toAddress) {/*from and to text boxes*/
var request = {
origin: fromAddress,

destination: toAddress,

travelMode: google.maps.DirectionsTravelMode.DRIVING

};

directionsService.route(request,

function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);

}

});

}

function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;

}

}

function setDirections(fromAddress, toAddress) {
calcRoute(fromAddress, toAddress);

}

function showLocation() {
geocoder.getLocations(document.forms[0].fromAddress.value,

function(response) {
if (!response || response.Status.code != 200) {
alert(

"Sorry, we were unable to geocode the first address");
}

else {
location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

geocoder.getLocations(document.forms[0].toAddress.value,

function(response) {
if (!response || response.Status.code != 200) {
alert(

"Sorry, we were unable to geocode the second address");
}

else {
location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

gDir.load(

'from: ' + location1.address + ' to: ' + location2.address);
}

});

}

});

}

</script>


<

body onload="initialize()">
<div>
<div id="map_canvas" style="width: 430px; height: 450px; margin-right: 10px;">
</div>
</div>
</div>

/*Contains texboxes and buttons*/

</div>


<div id="directionsPanel" style="text-align: right; width: 900px; height: 100%;">
<p>
Total Distance:

<span id="total"></span>
</p>
</div>
</

body>