Question

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.

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 "}"…all of this code functions):

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("map_canvas"), 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("directions_detail"));
//end initialize()
};

function calcRoute() {
//get start string from Start input box
var start = document.getElementById("start").value;
//get end string from End input box
var end = document.getElementById("end").value;
    //set up an array for waypoints
var waypts = [];
    
    //define where the waypoints will come from
var checkboxArray = document.getElementById("waypoints");

        //loop to retrieve any waypoints from that box
        for (var i = 0; i < 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 <div> where this will be presented to the user
            var summaryPanel = document.getElementById("directions_panel");
            
            //clear the <div>
            summaryPanel.innerHTML = "";
            //turn direcitons_panel "on"...gives the div a color (in my css)
            summaryPanel.className = "directions_panel_on";
            
            // For each route, display summary information.
            for (var i = 0; i < 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 += "<b>Route Segment: " + routeSegment + "</b><br />";
              summaryPanel.innerHTML += route.legs[i].start_address + " to ";
              summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
              summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
            
            //end for loop
            };

  //end directionsService() function  
  });   
//end calcRoute() function
}

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 request variable, which defines the waypoints array as the hard stopover points that split the route up.

I know that the array I’m looking for is called via_waypoint[]inside of the legs[] array…it’s just getting an object out of the damn DirectionsRenderer with the stupid via_waypoints[] array populated. I have the rest ready to go on the PHP/MySqul and AJAX side of things.

I’ve already tried this tutorial…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.

Answer 1

I was trying for saving waypoints and this should be useful to other users who are searching for the same.

I have created set of scripts to save the directions waypoints in the database also code to fetch that information back and display the waypoints in another map. I have provided html, php and sql files and complete explanation in this link.

http://vikku.info/programming/google-maps-v3/draggable-directions/saving-draggable-directions-saving-waypoints-google-directions-google-maps-v3.htm.

Also you can copy the source code of that page and you can edit according to your preference and use the sql file for the database.