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

geocodezip · Accepted Answer

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=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%
}

Google Maps Waypoints more than 8 issue

Answers (1)

Related Questions