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 destinations it does not work. I have looked on the we but I am not getting any really good example tutorials showing how this is done. Below is what I have done so far. But I am pretty sure this is done really badly. Any examples would be great.

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

Answer 1

I was searching for how to add multiple destinations to the google map api, this came up in the top search result but it doesn't help much. Finally found the answer in google doc, You can supply one or more locations separated by the pipe character (|), in the form of an address, latitude/longitude coordinates, or a place ID. For example, this request will give you the distance information from Miami to 3 destinations.

http://maps.googleapis.com/maps/api/distancematrix/json?destinations=Washington,DC|New+York,NY|Los+Angeles,CA&origins=Miami,FL&units=imperial

It will return a json like this:

{
   "destination_addresses" : [ "Washington, DC, USA", "New York, NY, USA", "Los Angeles, CA, USA" ],
   "origin_addresses" : [ "Miami, FL, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "1,053 mi",
                  "value" : 1693921
               },
               "duration" : {
                  "text" : "14 hours 56 mins",
                  "value" : 53781
               },
               "status" : "OK"
            },
            {
               "distance" : {
                  "text" : "1,277 mi",
                  "value" : 2054642
               },
               "duration" : {
                  "text" : "18 hours 24 mins",
                  "value" : 66219
               },
               "status" : "OK"
            },
            {
               "distance" : {
                  "text" : "2,733 mi",
                  "value" : 4397976
               },
               "duration" : {
                  "text" : "1 day 14 hours",
                  "value" : 138230
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

Answer 2

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