如何使用Google Maps Waypoint重绘路线

Question

I've got a Google Map where users search for a start and end point in input fields, then once the route has been drawn they can customise the route by adding and dragging waypoints. On submit the route is saved as XML, and then redrawn on a new map when needed. The problem is that at the minute I only have the start and end points saving to the XML.

I've been working from this documentation: https://developers.google.com/maps/documentation/javascript/directions#Waypoints , but I'm completely stumped here.

The way I have proposed to do it is the same as the start and end points - saving the lat and long values into the XML. The JS below gets the data of the waypoints. I've console.logged it to see how the arrays are structured. The problem I have here is that I don't know how to loop through each waypoint (if there is more than one) and save each one as a new variable so that I can add them to my form for a PHP submission.

//What to do when a waypoint has been added/changed
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    var waypoints = directionsDisplay.getDirections().routes[0].legs[0].via_waypoints;
    console.log(waypoints);
    console.log(waypoints[0].kb);
});

Like I said though, there is probably an easier way, above is just what I've tried so far. This is the result of the console.log(waypoints)...

The JS which gives hidden inputs their values is below...

$('form.add-journix').submit(function() {
      $('#startlat').attr('value', startLatVal);
      $('#startlng').attr('value', startLongVal);
      $('#endlat').attr('value', endLatVal);
      $('#endlng').attr('value', endLongVal);
  });

This is the PHP which saves it as XML...

header("Content-type: text/xml"); 

    // Iterate through the rows, adding XML nodes for each

    while ($row = mysql_fetch_assoc($result)){  
      // ADD TO XML DOCUMENT NODE  
      $node = $dom->createElement("marker");  
      $newnode = $parnode->appendChild($node);   
      $newnode->setAttribute("title", $row['title']);  
      $newnode->setAttribute("description", $row['description']);  
      $newnode->setAttribute("startlat", $row['startlat']);  
      $newnode->setAttribute("startlng", $row['startlng']);  
      $newnode->setAttribute("endlat", $row['endlat']);  
      $newnode->setAttribute("endlng", $row['endlng']);  
    } 

    echo $dom->saveXML();

Answer 1

When your problem is only the loop through the waypoints, it goes like this:

for(var i=0;i<waypoints.length;++i){
  console.log(waypoints[i].lat(),waypoints[i].lng());
}