title: Saving Dragable Directions Google Directions API v3
body: <p>I'm making an app with the Directions API to create biking directions. The user needs to be able to start from a custom point, add custom stopping points along the route, and actually drag the directions. Once they're done, I need to save the new route to a database.</p>
  <p>I have the map up and running, users can add their start and waypoints via HTML input boxes, and it's perfectly dragable (sorry for the copious amounts of comments…those are primarily so I can remember what's going on…oh, and don't worry in this section about syntax…I'm copying and pasting from different parts, so I might have missed a &quot;}&quot;…all of this code functions):</p>
  <pre><code>function initialize() {
  
      var rendererOptions = {
          draggable: true,
      //end redererOptions
      };
        
      directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
      var chicago = new google.maps.LatLng(42.73352,-84.48383);
      var myOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: chicago,
      //end myOptions
      }
      
      //create the world of the dream (define where the map's gonna go
      map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions);
      //and the subject fills it with it's subconscious (Call the map from Directions and place it in the div we've created)
      directionsDisplay.setMap(map);
      //tell google where the printed directions will go
      directionsDisplay.setPanel(document.getElementById(&quot;directions_detail&quot;));
  //end initialize()
  };
  
  function calcRoute() {
  //get start string from Start input box
  var start = document.getElementById(&quot;start&quot;).value;
  //get end string from End input box
  var end = document.getElementById(&quot;end&quot;).value;
      //set up an array for waypoints
  var waypts = [];
      
      //define where the waypoints will come from
  var checkboxArray = document.getElementById(&quot;waypoints&quot;);
  
          //loop to retrieve any waypoints from that box
          for (var i = 0; i &lt; checkboxArray.length; i++) {
              //if any options in the select box are selected, add them
            if (checkboxArray.options[i].selected == true) {
              waypts.push({
  
              //set up parameters to push to the Directions API
              location:checkboxArray[i].value,
  
              //make them explicit waypoints that separate the route into legs 
                  stopover:true});
            //end if loop
            }
  //call the Directions Service API, pass the request variable (above) and call a function asking for the response and status objects
  directionsService.route(request, function(response, status) {
  
  
  if (status == google.maps.DirectionsStatus.OK) 
          {
              //pass the response object to the map
              directionsDisplay.setDirections(response);
              
              //set up a route variable for the upcoming loop
              var route = response.routes[0];
              //set up a variable for the route summary, define the &lt;div&gt; where this will be presented to the user
              var summaryPanel = document.getElementById(&quot;directions_panel&quot;);
              
              //clear the &lt;div&gt;
              summaryPanel.innerHTML = &quot;&quot;;
              //turn direcitons_panel &quot;on&quot;...gives the div a color (in my css)
              summaryPanel.className = &quot;directions_panel_on&quot;;
              
              // For each route, display summary information.
              for (var i = 0; i &lt; route.legs.length; i++) {
                  //set up a route segment variable to display a 1-based segment for the segment summary in html
                var routeSegment = i + 1;
                summaryPanel.innerHTML += &quot;&lt;b&gt;Route Segment: &quot; + routeSegment + &quot;&lt;/b&gt;&lt;br /&gt;&quot;;
                summaryPanel.innerHTML += route.legs[i].start_address + &quot; to &quot;;
                summaryPanel.innerHTML += route.legs[i].end_address + &quot;&lt;br /&gt;&quot;;
                summaryPanel.innerHTML += route.legs[i].distance.text + &quot;&lt;br /&gt;&lt;br /&gt;&quot;;
              
              //end for loop
              };
  
    //end directionsService() function  
    });   
  //end calcRoute() function
  }
  </code></pre>
  <p>SO. You have my base. Everything's functional (I have it running on my server)…users can create a fully customized map. I just can't save it if they decided to drag the path of the route because I need to call an object with AJAX, and the only object I know how to call is tied to the <code>request</code> variable, which defines the waypoints array as the hard stopover points that split the route up.</p>
  <p>I know that the array I'm looking for is called <code>via_waypoint[]</code>inside of the <code>legs[]</code> array…it's just getting an object out of the damn DirectionsRenderer with the stupid <code>via_waypoints[]</code> array populated. I have the rest ready to go on the PHP/MySqul and AJAX side of things.</p>
  <p>I've already tried <a href="https://stackoverflow.com/questions/4657860/google-maps-saving-dragable-directions">this tutorial</a>…and I can't get it to work. The main answer itself says it left out a lot, and I'm so new to JavaScript, it appears (s)he left out too much for me.</p>