Create a google maps link from API Map with multiple waypoint

Question

I have built a web app that uses the google maps v3 API to build a map with directions multiple waypoints.

 jQuery.getJSON(driverURL, function(dData){
       var routeObject = {};
       var lat = dData.Location.lat;
       var lng = dData.Location.lng;
       routeObject.origin = new google.maps.LatLng(lat, lng);
       routeObject.destination = new google.maps.LatLng(endRoute.lat, endRoute.lng);
       routeObject.waypoints = waypoints;
       routeObject.travelMode = google.maps.TravelMode.DRIVING;
       routeObject.optimizeWaypoints = true;
       directionsService.route(routeObject, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                 var directionsDisplay = new google.maps.DirectionsRenderer({
                       polylineOptions: {
                            strokeColor: colors[driverLines.length]
                       }
                 });
                 directionsDisplay.setMap(dMap);
                 directionsDisplay.setDirections(response);
            } else {
                 window.alert('Directions request failed due to ' + status);
            }
       });
  });

I have the Map, the waypoints, the start and the end all stored, but I'd like to be able to generate a google maps clickable link to the directions for this route that I can send to users. I can find how to send a link with a single marker, but not how to generate a map link with the full route direction.

Any help appreciated.

Answer 1

Don`t forget for In script :

function initMap() {
    var pointA = new google.maps.LatLng(51.7519, -1.2578),
        pointB = new google.maps.LatLng(51.509865, -0.118092),
        pointC = new google.maps.LatLng(50.8429, -0.1313),
        myOptions = {
            zoom: 7,
            center: pointA
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        // Instantiate a directions service.
        directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "B",
            map: map
        }),
        markerC = new google.maps.Marker({
            position: pointC,
            title: "point C",
            label: "C",
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB, pointC);

}


function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB, pointC) {
    var first = new google.maps.LatLng(51.509865, -0.118092); //we can get them from params.
    var request = {
        origin: pointA,
        destination: pointC,
        waypoints: [{location: first, stopover: false}
          ], //here array of waypoints
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById("directions_panel");
            summaryPanel.innerHTML = "";
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
                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 />";
            }
        } else {
            alert("directions response " + status);
        }
    });     
}
initMap();

Answer 2

I figured this out, and it's actually easier than I thought, but took some doing.

First I took some of the waypoints I had, as addresses, not lat/lng points, and built a route map on maps.google.com. Then I looked at how the URL for that map was constructed. Very simple to re-create.

The URL is just http://maps.google.com/dir/starting address as address,city,state,zip/waypoint as address,city,state,zip/waypoint/ending address as address,city,state,zip And you're done. If you're using lat/lng coordinates for your start,waypoint,end locations you'll have to first geo-code them using the V3 api then extract the address information from the returned result and insert those in your URL, but it works.

Here's how I made the final link that has a start, a bunch of waypoints, and an ending location. I start with a JSON object, called Data, that has all the address info in it and build a long string from it, in the format Google Maps expects:

var dirs = ''
for(var x = 0; x<Data.length;x++){
    dirs += Data[x].Address + "," + Data[x].City + "," + Data[x].State + "," + Data[x].Zip + "/";
}

Then, I add the start and end locations to it:

var dirLink = 'http://maps.google.com/maps/dir/';
dirLink += start.Address + "," + start.City + "," + start.State + "," + start.Zip + "/" + dirs + end.Address + "," + end.City + "," + end.State + "," + end.Zip;

And dirLink will be a complete link that will give directions from start.Address through all the waypoints to end.Address.