Google Maps Waypoints more than 8 issue

Question

There are lot of examples/code available online for creating Google map using multiple waypoints. I have created the similar version of codes available by excluding all the markers , click buttons ..etc.

I am using google maps V3 waypoints to create routes between multiple destinations.Since we cant use more than 8 waypoints , I am processing the multiple waypoints using batches .In the code below there are 19 gps locations in which 10 gps locations are processed in one batch and 9 in another. drawRouteMap function is called to draw the route for the set of 10 (or lesser) gps locations.

The issue is Google map is being overridden in each function call.The output of the Google map shows the latest processed values .Anyone could suggest me where i am going wrong

<!DOCTYPE html>
<html>
  <head>
      <title></title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">


var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function calcRoute() {

  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  var msg ="41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195";
  var input_msg=msg.split(":");
  var locations = new Array();      

  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng =input_msg[i].split(",");
    locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); 
  }

  directionsDisplay = new google.maps.DirectionsRenderer();

  var mapOptions = {
  center: locations[0],
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP  
  }
  directionsDisplay.setMap(map);

  var i =locations.length;
  var index =0;

  while(i !=0 ){

        if(i<3){
          var tmp_locations =new Array();
          for (var j=index;j<locations.length;j++) {
            tmp_locations.push(locations[index]);
          }
        drawRouteMap(tmp_locations); 
        i=0; 
        index=locations.length;  
       }

        if( i>= 3 && i<=10) {
           alert("before :fun < 10: i value "+i+" index value"+index);
           var tmp_locations =new Array();
           for (var j=index;j<locations.length;j++) {
             tmp_locations.push(locations[j]);
           }
        drawRouteMap(tmp_locations);
        i=0;
        index=locations.length;
        alert("after fun < 10: i value "+i+" index value"+index);
        }

        if(i > 10) {
        alert("before :fun > 10: i value "+i+" index value"+index);
        var tmp_locations =new Array();
        for (var j=index;j<index+10;j++) {
         tmp_locations.push(locations[j]);
        }
        drawRouteMap(tmp_locations);
        i=i-10; 
        index =index+10;
        alert("after fun > 10: i value "+i+" index value"+index);
        }
   }
}


 function drawRouteMap(locations){

  var start,end;
  var waypts = [];

  for(var k =0;k<locations.length;k++){
  if (k>=1 && k<=locations.length-2) {
      waypts.push({
          location:locations[k],
          stopover:true});
  }
  if(k==0) 
    start=locations[k];

  if(k==locations.length-1) 
     end=locations[k];

 }
   var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
      console.log(request);
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            console.log(status);
      directionsDisplay.setDirections(response);
    }
  });


 }

google.maps.event.addDomListener(window, 'load', calcRoute);
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
  </body>
</html>

geocodezip · Accepted Answer · 2014-12-26T12:34:44.653

You need to create a separate instance of the DirectionsRenderer for each route you want to display on the map.

var directionsDisplay = [];
var directionsService = [];
var map = null;
var bounds = null;

 function drawRouteMap(locations){

  var start,end;
  var waypts = [];

  for(var k =0;k<locations.length;k++){
  if (k>=1 && k<=locations.length-2) {
      waypts.push({
          location:locations[k],
          stopover:true});
  }
  if(k==0) 
    start=locations[k];

  if(k==locations.length-1) 
     end=locations[k];

 }
   var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
      console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length-1;
     directionsDisplay.push(new google.maps.DirectionsRenderer({preservViewport:true}));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      if (!bounds) bounds = response.bounds;
      else bounds.union(response.bounds);
      directionsDisplay[instance].setDirections(response);
      if (instance > 0) map.fitBounds(bounds);
    }
  });
 }

working fiddle (but you probably want to connect the two routes)

working fiddle with common point

working code snippet:

var directionsDisplay = [];
var directionsService = [];
var map = null;

function calcRoute() {
  var msg = "41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195";
  var input_msg = msg.split(":");
  var locations = new Array();

    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < input_msg.length; i++) {
        var tmp_lat_lng = input_msg[i].split(",");
        locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
        bounds.extend(locations[locations.length-1]);
    }

    var mapOptions = {
        // center: locations[0],
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    map.fitBounds(bounds);
    google.maps.event.addDomListener(window,'resize',function() {
      google.maps.event.trigger(map,'resize');
      map.fitBounds(bounds);
    });

  var i = locations.length;
  var index = 0;

  while (i != 0) {

    if (i < 3) {
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[index]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
    }

    if (i >= 3 && i <= 10) {
      console.log("before :fun < 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
      console.log("after fun < 10: i value " + i + " index value" + index);
    }

    if (i >= 10) {
      console.log("before :fun > 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < index + 10; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = i - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value" + index);
    }
  }
}


function drawRouteMap(locations) {

  var start, end;
  var waypts = [];

  for (var k = 0; k < locations.length; k++) {
    if (k >= 1 && k <= locations.length - 2) {
      waypts.push({
        location: locations[k],
        stopover: true
      });
    }
    if (k == 0) start = locations[k];

    if (k == locations.length - 1) end = locations[k];

  }
  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    travelMode: google.maps.TravelMode.DRIVING
  };
  console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length - 1;
  directionsDisplay.push(new google.maps.DirectionsRenderer({
    preserveViewport: true
  }));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      directionsDisplay[instance].setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', calcRoute);

html,
body,
#dvMap {
  height: 100%;
  width: 100%
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>

geocodezip : I could see some error like " Uncaught TypeError: Cannot read property 'getSouthWest' of undefined" in console. can i ignore it ? — user3534342, Dec 24 '14 at 22:01
That is fixed now. The zoom to fit the combined route was broken. — geocodezip, Dec 24 '14 at 23:47
How can i fix zoom ?. I tried using setzoom level , initialize zoom , width to 100%.but none of them works. — user3534342, Dec 25 '14 at 21:17
I updated my answer with the fix before posting my last comment. the jsfiddle (the one that connects the whole route) and code snippet now work as expected (at least by me). — geocodezip, Dec 26 '14 at 05:26
jsfiddle(with common point) is having problem while zooming or dragging and jsfiddle(connecting two points) is an earlier version of the first one — user3534342, Dec 26 '14 at 05:50
Even thought I honestly hate you for down-voting my question without reason, thank you for your help. — Kadaj, Sep 30 '16 at 12:08

Google Maps Waypoints more than 8 issue

1 Answers1

Linked