Plotting more than 8 waypoints in Google Maps v3

Question

Migrating code from Javascript API 2 to 3. I have a list of locations which i need to plot in the form of a driving directions. This was done in v2 using the following code<

Answer 1

One possible work around (particularly for a lightly used site) is to use multiple DirectionsService requests.

• example 1 (addresses)
• example 2 (coordinates)

Answer 2

Use Should need to Use array concept like these...

directionsService[i].route({                                    
                    'origin': start,
                    'destination': end
                    'waypoints': waypts,
                    'travelMode': 'DRIVING'
                       },
                    function (directions, status){              
                                if (status == google.maps.DirectionsStatus.OK) {
                                    directionsDisplay[j].setDirections(directions);
                                }
                            });

in these directionservice and directiondisplay are should be in array logic and using looping concepts use should need to assign start,end and waypoints dynamically and
try sending multiple request means u ll get the route for n number of latlon's ...but the markers ll be repeat with same name after 8 waypoints for that we remove the default markers by using supressmarkers false property...

Answer 3

As others said, it's imposable to do it using Google's JavaScript API. However, Google does allow up to 23 waypoints with a server-side request. So using PHP and JavaScript, I was able to make a workaround.

What you have to do is get the "waypoint order" from the server side request and then have JavaScript give you directions between each location.

<?php
  $startLocation = "40.713,-74.0135";
  $endLocation = "40.75773,-73.985708";
  $waypoints = array("40.748433,-73.985656|", "40.689167,-74.044444|");
  $apiKey = "";
  $routeData = json_decode(file_get_contents("https://maps.googleapis.com/maps/api/directions/json?origin=".$startLoc."&destination=".$endLoc."&waypoints=optimize:true|".$waypoints."&key=".$apiKey));
  echo "var waypointsOrder = ". json_encode($routeData->routes[0]->waypoint_order) . ";\n";
?>

var startLocation = {lat: 40.713, lng: -74.0135};
var endLocation = {lat: 40.75773, lng: -73.985708};

//get directions from the origin to the first waypoint
var request = {
    origin: startLocation,
    destination: JSON.parse(places[waypointsOrder[0]][1]),
    travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
          renderDirections(result, map);
    }
});

//get directions from the last waypoint to the destination
var request = {
    origin: JSON.parse(places[waypointsOrder[waypointsOrder.length-1]][1]),
    destination: endLocation,
    travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
          renderDirections(result, map);
    }
});

//get directions between each waypoint
for (i = 1; i < waypointsOrder.length; i++) {
  var request = {
      origin: JSON.parse(places[waypointsOrder[i-1]][1]),
      destination: JSON.parse(places[waypointsOrder[i]][1]),
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function (result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
          renderDirections(result, map);
      }
  });
}

function renderDirections(result, map) {
  var directionsDisplay = new google.maps.DirectionsRenderer ({
    map: map
  });
  directionsDisplay.setMap(map); 
  directionsDisplay.setDirections(result); 
}