0

I'm having a hard time to try show multiple routes in one map using over than 10 waypoints for each route but It is showing just one route. Can you please tell me what I am doing wrong? Here is my code in jsfiddle. http://jsfiddle.net/agr3a07m/83/

var directionsDisplay = [];
var directionsService = [];
var map = null;
var m = [
    '33.2970431149,130.5494435901',
    '33.3005149987,130.5513321623',
    '33.304042372,130.5497765735',
    '33.3104305379,130.5474986907',
    '33.3102360342,130.542915747',
    '33.3117635011,130.5344719334',
    '33.3111524907,130.536499571',
    '33.3132632805,130.531027706',
    '33.314679737,130.5276668088',
    '33.3129298155,130.5214451838',
    '33.3135130049 ,130.5167788778',
    '33.3143184142,130.5133346823',
    '33.3151238268 ,130.5100849151',

];
var msg = [
    '33.3288994858, 130.4731429044',
    '33.3265106749 ,130.462977192',
    '33.3257329153,130.4592553147',
    '33.3248161541,130.4482284949',
    '33.324871548,130.4393125661',
    '33.3246214636,130.4329519947',
    '33.3260100846,130.4261191649',
    '33.3294818525,130.4213693995',
    '33.3319258968,130.4134255023',
    '33.3276762737,130.4089816226',
    '33.3239542905,130.3998714394',

];
var ms = [
    '33.8088548609,130.8573666723',
    '33.8100491378 ,130.8550890287',
    '33.8121044172 ,130.8518669794',
    '33.8141319684 ,130.8513113767',
    '33.8159373595 ,130.8529500463',
    '33.818687093 ,130.8545331216',
    '33.8213534993 ,130.8559495478',
    '33.8218257146 ,130.8584493185',
    '33.8246587318 ,130.8576992503',
    '33.8281028031 ,130.857421337',
    '33.8323801257 ,130.8575600175',
    '33.8360186793 ,130.8606429272',
    '33.8385461993 ,130.8613649731',
    '33.8415736984 ,130.8639479525',
    '33.8455733138 ,130.8664197853',
    '33.8484063873 ,130.8688916718',
    '33.8514059878 ,130.8643919073',

];
    function init(){
    calcRoute(msg);
    calcRoute(m);
    calcRoute(ms);
    
    
    }
function calcRoute(f) {


    var input_msg = f;
    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);

    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[j]);
            }
            drawRouteMap(tmp_locations);
            i = 0;
            index = locations.length;
        }
*/
        if ( 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, a) {

    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({
        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', init);
Backhandx
  • 43
  • 8
  • 2
    one issue you might be having is your coordinates like `'33.3117635011,130.5344719334'` are strings. Even when you split them into their lat/lng parts, those are still strings. So you could try `new google.maps.LatLng(parseFloat(tmp_lat_lng[0]), parseFloat(tmp_lat_lng[1]))` – duncan Jun 29 '15 at 07:18
  • I edit my code and now It draws just one route not 3. Here is my code. – Backhandx Jun 29 '15 at 08:00
  • 1
    The code you have in the `if (i < 3) {...}` and `if (i >= 3 && i <= 10) {...}` blocks is identical (apart from the console.log statements). I don't understand the point of having it in two separate blocks – duncan Jun 29 '15 at 08:04
  • Where did you get the original code from? I see code commented out that is required to make it work. You only have one DirectionsService object, but are reusing it. The Google Maps Javascript API (free version) only allows 8 waypoints in a single directions request. – geocodezip Jun 29 '15 at 08:06
  • I correct it. Please find the modification here : http://jsfiddle.net/agr3a07m/84/ – Backhandx Jun 29 '15 at 08:10

1 Answers1

0
  1. put the map initialization into the initialize function. If you reuse the calcRoute function, you can't have it in there.
  2. If you want the map zoomed to show all the routes, use a common (global) bounds object.
  3. Remember that the DirectionsService is subject to a quota and rate limit, you need to check and report the status returned when it is not "OK", otherwise it will fail silently.

Related question (one route with more than 8 waypoints): Google Maps Waypoints more than 8 issue

working fiddle

code snippet:

var directionsDisplay = [];
var directionsService = [];
var map = null;
var bounds = new google.maps.LatLngBounds();
var m = [
  '33.2970431149,130.5494435901',
  '33.3005149987,130.5513321623',
  '33.304042372,130.5497765735',
  '33.3104305379,130.5474986907',
  '33.3102360342,130.542915747',
  '33.3117635011,130.5344719334',
  '33.3111524907,130.536499571',
  '33.3132632805,130.531027706',
  '33.314679737,130.5276668088',
  '33.3129298155,130.5214451838',
  '33.3135130049,130.5167788778',
  '33.3143184142,130.5133346823',
  '33.3151238268,130.5100849151'
];
var msg = [
  '33.3288994858,130.4731429044',
  '33.3265106749,130.462977192',
  '33.3257329153,130.4592553147',
  '33.3248161541,130.4482284949',
  '33.324871548,130.4393125661',
  '33.3246214636,130.4329519947',
  '33.3260100846,130.4261191649',
  '33.3294818525,130.4213693995',
  '33.3319258968,130.4134255023',
  '33.3276762737,130.4089816226',
  '33.3239542905,130.3998714394'
];
var ms = [
  '33.8088548609,130.8573666723',
  '33.8100491378,130.8550890287',
  '33.8121044172,130.8518669794',
  '33.8141319684,130.8513113767',
  '33.8159373595,130.8529500463',
  '33.818687093,130.8545331216',
  '33.8213534993,130.8559495478',
  '33.8218257146,130.8584493185',
  '33.8246587318,130.8576992503',
  '33.8281028031,130.857421337',
  '33.8323801257,130.8575600175',
  '33.8360186793,130.8606429272',
  '33.8385461993,130.8613649731',
  '33.8415736984,130.8639479525',
  '33.8455733138,130.8664197853',
  '33.8484063873,130.8688916718',
  '33.8514059878,130.8643919073'
];

function init() {
  var mapOptions = {
    // center: locations[0],
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  calcRoute(msg);
  calcRoute(m);
  calcRoute(ms);


}

function calcRoute(f) {
  var input_msg = f;
  var locations = new Array();
  //alert(f);
  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng = input_msg[i].split(",");
    locations.push(new google.maps.LatLng(parseFloat(tmp_lat_lng[0]), parseFloat(tmp_lat_lng[1])));
    bounds.extend(locations[locations.length - 1]);
  }



  map.fitBounds(bounds);

  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[j]);
      }
      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;
      console.log("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 - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value" + index);
    }
  }


}
j = 0;

function drawRouteMap(locations) {
  j++;
  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({
    preserveViewport: true
  }));
  // var instance = directionsDisplay.length - 1;
  //  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // alert(status);
      if (directionsDisplay && directionsDisplay[instance]) {
        directionsDisplay[instance].setMap(map);
        directionsDisplay[instance].setDirections(response);
      } else {
        document.getElementById('info').innerHTML += "instance=" + instance + " doesn't exist<br>";
      }
    } else {
      document.getElementsById('info').innerHTML += "instance=" + instance + " status=" + status + "<br>";
    }
  });
  // alert(instance);

}
google.maps.event.addDomListener(window, 'load', init);
html,
body,
#dvMap {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>
Community
  • 1
  • 1
geocodezip
  • 158,664
  • 13
  • 220
  • 245