los mapas de Google API - la adición de varios destinos que no trabaja (google direcciones)

Question

Estoy teniendo problemas para crear/reproducir la función de los mapas de Google direcciones. Puedo hacer que funcione bien cuando tengo un campo From/To, pero tan pronto como intento agregar varios destinos, no funciona. Miré el we pero no recibo ningún tutorial de ejemplo muy bueno que muestre cómo se hace esto. Debajo está lo que he hecho hasta ahora. Pero estoy bastante seguro de que esto se hace realmente mal. Cualquier ejemplo sería genial.

<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

Esta es la forma en que he manejado múltiples direcciones punto de paso.

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

Answer 2

que estaba buscando la manera de añadir varios destinos al mapa de Google API, esto ocurrió en el resultado de búsqueda superior pero no ayuda mucho. Finalmente encontró la respuesta en Google doc, Puede proporcionar una o más ubicaciones separadas por el carácter de canalización (|), en forma de una dirección de coordenadas, latitud/longitud, o una identificación lugar. Por ejemplo, esta solicitud le dará la información de distancia de Miami a 3 destinos.

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

devolverá un JSON como esto:

{ 
    "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" 
}