Render google maps link as polyline

Question

I want to display a couple of routes on a map, but I would prefer to first draw them with google maps. For example, I got directions from Seattle to San Diego, then moved things a bit, and the link looks like this:

http://maps.google.com/maps?f=d&source=s_d&saddr=1521+NW+54th+St,+Seattle,+WA+98107&daddr=42.488302,-124.541016+to:San+Diego,+CA&hl=en&geocode=FT9a1wIdC6u0-Cnv7UVayBWQVDHcoty0jw_cIQ%3B%3BFUEy8wEdeVIE-SlLHpKtD1PZgDF53xX9_SE6DQ&mra=dpe&mrcr=0&mrsp=1&sz=5&via=1&dirflg=w&sll=40.19161,-119.767455&sspn=17.573252,39.506836&ie=UTF8&ll=41.14557,-113.24707&spn=17.324253,39.506836&z=5

I know that I can use the DirectionsRenderer to draw a polyline connecting Seattle and San Diego like this:

  function renderDirections(result) { 
    var directionsRenderer = new google.maps.DirectionsRenderer;
    directionsRenderer.setMap(gMap);
    directionsRenderer.setDirections(result);
  } 

  var directionsService = new google.maps.DirectionsService;
  function requestDirections(start, end) { 
    directionsService.route({
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.BICYCLING
    }, function(result) { 
      renderDirections(result);
    });
  } 
  requestDirections('Seattle, WA', 'San Diego, CA');

What I would like to know is if there is a way to pass in the link as the directions request. The link contains waypoints, my modifications to the default route.

Answer 1

Yes, you can use the DirectionsRenderer so long as you pass your start and end points into a DirectionsRequest, and pass that into a DirectionsService object. Once you call .setDirections it'll draw the polyline for you. From the API documentation at http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRenderer:

Set the renderer to use the result from the DirectionsService. Setting a valid set of directions in this manner will display the directions on the renderer's designated map and panel.

If what you were getting at was drawing the polyline yourself (though I don't see why it would be necessary), the individual points in the path can be derived -- DirectionsResult contains an array of DirectionsLegs which contains an array of DirectionsSteps which contains a .path property, which is an array of latlngs. (whew!)

Answer 2

It is possible and you are on the right track. It is hard to understand the API. I believe that you have to set the waypoints in the DirectionRequest object of the DirectionsService when you call the route method. I don't think you can pass in a link, but you can create an object or Array of waypoints first.

If you want, you can also specify the optimizeWaypoints boolean. Check out the DirectionsRequest Object.

waypoints Array. Array of intermediate waypoints. Directions will be calculated from the origin to the destination by way of each waypoint in this array. Optional.