API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 21st, 2015
203
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5. <meta charset="utf-8">
  6. <title>Waypoints in directions</title>
  7. <style>
  8. html, body, #map-canvas {
  9.   height: 100%;
  10. margin: 0px;
  11. padding: 0px
  12. }
  13. #panel {
  14.   position: absolute;
  15. top: 5px;
  16. left: 50%;
  17. margin-left: -180px;
  18. z-index: 5;
  19. background-color: #fff;
  20. padding: 5px;
  21. border: 1px solid #999;
  22. }
  23. </style>
  24. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  25. <script>
  26.  
  27. var directionsDisplay;
  28. var directionsService = new google.maps.DirectionsService();
  29. var map;
  30. var batches = [];
  31. var waypts = [];
  32.  
  33.  
  34. function initialize() {
  35.  
  36.  
  37.   directionsDisplay = new google.maps.DirectionsRenderer();
  38.   var chicago = new google.maps.LatLng(50.797378, 0.058504);
  39.   var mapOptions = {
  40.       zoom: 6,
  41.       center: chicago
  42.   }
  43.  
  44.   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  45.   directionsDisplay.setMap(map);
  46.   waypts.push({location:new google.maps.LatLng(50.797378, 0.058504),stopover:true});  
  47.   waypts.push({location:new google.maps.LatLng(50.84066183,-0.4950805),stopover:true});
  48.   waypts.push({location:new google.maps.LatLng(50.84042033,-0.505672),stopover:true});
  49.   waypts.push({location:new google.maps.LatLng(50.84042033,-0.505672),stopover:true});
  50.   waypts.push({location:new google.maps.LatLng(50.84042033,-0.505672),stopover:true});
  51.   waypts.push({location:new google.maps.LatLng(50.84042033,-0.505672),stopover:true});
  52.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  53.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  54.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  55.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  56.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  57.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  58.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  59.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  60.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  61.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  62.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  63.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  64.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  65.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  66.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  67.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  68.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  69.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  70.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  71.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  72.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  73.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  74.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  75.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  76.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  77.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  78.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  79.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  80.   waypts.push({location:new google.maps.LatLng(50.82321517,-0.5501035),stopover:true});
  81.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  82.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  83.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  84.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  85.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  86.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  87.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  88.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  89.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  90.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  91.   waypts.push({location:new google.maps.LatLng(50.818442,-0.55710767),stopover:true});
  92.   waypts.push({location:new google.maps.LatLng(50.8561195,-0.65900267),stopover:true});
  93.   waypts.push({location:new google.maps.LatLng(50.8561195,-0.65900267),stopover:true});
  94.   waypts.push({location:new google.maps.LatLng(50.8561195,-0.65900267),stopover:true});
  95.   waypts.push({location:new google.maps.LatLng(50.8561195,-0.65900267),stopover:true});
  96.   waypts.push({location:new google.maps.LatLng(50.85703483,-0.65348833),stopover:true});
  97.   waypts.push({location:new google.maps.LatLng(50.86659867,-0.630018),stopover:true});
  98.   waypts.push({location:new google.maps.LatLng(50.85330383,-0.63498383),stopover:true});
  99.   waypts.push({location:new google.maps.LatLng(50.8549755,-0.64712067),stopover:true});
  100.   waypts.push({location:new google.maps.LatLng(50.85585783,-0.64961117),stopover:true});
  101.   waypts.push({location:new google.maps.LatLng(50.85585783,-0.64961117),stopover:true});
  102.   waypts.push({location:new google.maps.LatLng(50.85886017,-0.5698375),stopover:true});
  103.   waypts.push({location:new google.maps.LatLng(50.85099883,-0.5634535),stopover:true});
  104.   waypts.push({location:new google.maps.LatLng(50.85099883,-0.5634535),stopover:true});
  105.   waypts.push({location:new google.maps.LatLng(50.84219867,-0.57915867),stopover:true});
  106.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  107.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  108.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  109.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  110.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  111.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  112.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  113.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  114.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  115.   waypts.push({location:new google.maps.LatLng(50.829614,-0.57823483),stopover:true});
  116.   waypts.push({location:new google.maps.LatLng(50.83001617,-0.57811617),stopover:true});
  117.   waypts.push({location:new google.maps.LatLng(50.82539533,-0.589086),stopover:true});
  118.   waypts.push({location:new google.maps.LatLng(50.82540817,-0.58928967),stopover:true});
  119.   waypts.push({location:new google.maps.LatLng(50.82540817,-0.58928967),stopover:true});
  120.   waypts.push({location:new google.maps.LatLng(50.82630817,-0.58845017),stopover:true});
  121.   waypts.push({location:new google.maps.LatLng(50.825811,-0.587971),stopover:true});
  122.   waypts.push({location:new google.maps.LatLng(50.8258645,-0.587609),stopover:true});
  123.   waypts.push({location:new google.maps.LatLng(50.8257455,-0.58849317),stopover:true});
  124.   waypts.push({location:new google.maps.LatLng(50.8257455,-0.58849317),stopover:true});
  125.   waypts.push({location:new google.maps.LatLng(50.825419,-0.588395),stopover:true});
  126.   waypts.push({location:new google.maps.LatLng(50.81279,-0.58203433),stopover:true});
  127.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  128.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  129.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  130.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  131.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  132.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  133.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  134.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  135.   waypts.push({location:new google.maps.LatLng(50.81258683,-0.58425567),stopover:true});
  136.   waypts.push({location:new google.maps.LatLng(50.812878,-0.58418683),stopover:true});
  137.   waypts.push({location:new google.maps.LatLng(50.812878,-0.58418683),stopover:true});
  138.   waypts.push({location:new google.maps.LatLng(50.81260833,-0.5845555),stopover:true});
  139.   waypts.push({location:new google.maps.LatLng(50.81270767,-0.58492633),stopover:true});
  140.   waypts.push({location:new google.maps.LatLng(50.81306267,-0.58496883),stopover:true});
  141.   waypts.push({location:new google.maps.LatLng(50.8140175,-0.58380567),stopover:true});
  142.   waypts.push({location:new google.maps.LatLng(50.81464667,-0.58437),stopover:true});
  143.   waypts.push({location:new google.maps.LatLng(50.81415467,-0.58320367),stopover:true});
  144.   waypts.push({location:new google.maps.LatLng(50.81415467,-0.58320367),stopover:true});
  145.   waypts.push({location:new google.maps.LatLng(50.81415467,-0.58320367),stopover:true});
  146.   waypts.push({location:new google.maps.LatLng(50.8159215,-0.59695883),stopover:true});
  147.   waypts.push({location:new google.maps.LatLng(50.81674783,-0.59651817),stopover:true});
  148.   waypts.push({location:new google.maps.LatLng(50.81956917,-0.5979725),stopover:true});
  149.   waypts.push({location:new google.maps.LatLng(50.81263917,-0.555177),stopover:true});
  150.   waypts.push({location:new google.maps.LatLng(50.81218967,-0.55584333),stopover:true});
  151.   waypts.push({location:new google.maps.LatLng(50.81218967,-0.55584333),stopover:true});
  152.   waypts.push({location:new google.maps.LatLng(50.81218967,-0.55584333),stopover:true});
  153.   waypts.push({location:new google.maps.LatLng(50.811967,-0.55665983),stopover:true});
  154.   waypts.push({location:new google.maps.LatLng(50.81289617,-0.55730517),stopover:true});
  155.   waypts.push({location:new google.maps.LatLng(50.81317783,-0.55531783),stopover:true});
  156.   waypts.push({location:new google.maps.LatLng(50.81269983,-0.55543767),stopover:true});
  157.   waypts.push({location:new google.maps.LatLng(50.81013483,-0.55427633),stopover:true});
  158.   waypts.push({location:new google.maps.LatLng(50.8058155,-0.54582017),stopover:true});
  159.   waypts.push({location:new google.maps.LatLng(50.82045,-0.60802217),stopover:true});
  160.   waypts.push({location:new google.maps.LatLng(50.81647467,-0.60886433),stopover:true});
  161.   waypts.push({location:new google.maps.LatLng(50.81474883,-0.61240333),stopover:true});
  162.   waypts.push({location:new google.maps.LatLng(50.84229283,-0.61525017),stopover:true});
  163.   waypts.push({location:new google.maps.LatLng(50.84536767,-0.62228383),stopover:true});
  164.   waypts.push({location:new google.maps.LatLng(50.846593,-0.6220225),stopover:true});
  165.   waypts.push({location:new google.maps.LatLng(50.84460583,-0.61934483),stopover:true});
  166.   waypts.push({location:new google.maps.LatLng(50.8471485,-0.61402167),stopover:true});
  167.   waypts.push({location:new google.maps.LatLng(50.8471485,-0.61402167),stopover:true});
  168.   waypts.push({location:new google.maps.LatLng(50.8471485,-0.61402167),stopover:true});
  169.   waypts.push({location:new google.maps.LatLng(50.8501855,-0.616509),stopover:true});
  170.   waypts.push({location:new google.maps.LatLng(50.85377917,-0.56846533),stopover:true});
  171.   waypts.push({location:new google.maps.LatLng(50.85073717,-0.57604567),stopover:true});
  172.   waypts.push({location:new google.maps.LatLng(50.85073717,-0.57604567),stopover:true});
  173.   waypts.push({location:new google.maps.LatLng(50.85476517,-0.55430183),stopover:true});
  174.   waypts.push({location:new google.maps.LatLng(50.86316917,-0.55118767),stopover:true});
  175.   waypts.push({location:new google.maps.LatLng(50.85339033,-0.55129333),stopover:true});
  176.   waypts.push({location:new google.maps.LatLng(50.8526435,-0.555416),stopover:true});
  177.   waypts.push({location:new google.maps.LatLng(50.85381033,-0.55340867),stopover:true});
  178.   waypts.push({location:new google.maps.LatLng(50.85411167,-0.5561055),stopover:true});
  179.   waypts.push({location:new google.maps.LatLng(50.85411167,-0.5561055),stopover:true});
  180.   waypts.push({location:new google.maps.LatLng(50.85439817,-0.555215),stopover:true});
  181.   waypts.push({location:new google.maps.LatLng(50.85445133,-0.5542865),stopover:true});
  182.   waypts.push({location:new google.maps.LatLng(50.849695,-0.5605635),stopover:true});
  183.   waypts.push({location:new google.maps.LatLng(50.84873933,-0.56130667),stopover:true});
  184.   waypts.push({location:new google.maps.LatLng(50.82439317,-0.58298467),stopover:true});
  185.   waypts.push({location:new google.maps.LatLng(50.856081,-0.659003),stopover:true});
  186.   waypts.push({location:new google.maps.LatLng(50.826333,-0.588399),stopover:true});
  187.   waypts.push({location:new google.maps.LatLng(50.826333,-0.588399),stopover:true});
  188.   waypts.push({location:new google.maps.LatLng(50.826333,-0.588399),stopover:true});
  189.   waypts.push({location:new google.maps.LatLng(50.825616,-0.58824233),stopover:true});
  190.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});
  191.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});
  192.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});
  193.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});
  194.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});
  195.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});
  196.   waypts.push({location:new google.maps.LatLng(50.81358333,-0.58364217),stopover:true});  
  197.   waypts.push({location:new google.maps.LatLng(50.797378, 0.058504),stopover:true});  
  198.  
  199. }
  200. function calcRoute() {
  201.   var combinedResults;
  202.   var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
  203.   var directionsResultsReturned = 0;
  204.  
  205.   var itemsPerBatch = 6; // google API max - 1 start, 1 stop, and 8 waypoints
  206.   var itemsCounter = 0;
  207.   var wayptsExist = waypts.length > 0;
  208.  
  209.   while (wayptsExist) {
  210.     var subBatch = [];
  211.     var subitemsCounter = 0;
  212.  
  213.     for (var j = itemsCounter; j < waypts.length; j++) {
  214.      subitemsCounter++;
  215.      subBatch.push(waypts[j]);
  216.      if (subitemsCounter == itemsPerBatch)
  217.        break;
  218.    }
  219.  
  220.    itemsCounter += subitemsCounter;
  221.    batches.push(subBatch);
  222.    wayptsExist = itemsCounter < waypts.length;
  223.  
  224.    itemsCounter--;
  225.  }    
  226.  
  227.  for (k = 0; k < batches.length; k++) {
  228.    var lastIndex = batches[k].length - 1;
  229.    var start = batches[k][0].location;
  230.    var end = batches[k][lastIndex].location;
  231.  
  232.    // trim first and last entry from array
  233.  
  234.  
  235.   setTimeout(makeRequest,3000*(k+1));
  236.  }
  237. }
  238.  
  239.  
  240. function makeRequest(){
  241.  
  242.    var way = [];
  243.    way = batches[k];
  244.    way.splice(0, 1);
  245.    way.splice(waypts.length - 1, 1);
  246.  
  247.    var request = {
  248.        origin: start,
  249.        destination: end,
  250.        waypoints: way,
  251.        travelMode: google.maps.TravelMode.DRIVING
  252.    };
  253.      directionsService.route(request, function (result, status) {
  254.        window.alert(status)
  255.        if (status == window.google.maps.DirectionsStatus.OK) {
  256.  
  257.  
  258.          var unsortedResult = { order: kk, result: result };
  259.          unsortedResults.push(unsortedResult);
  260.  
  261.          directionsResultsReturned++;
  262.  
  263.          if (directionsResultsReturned == batches.length) // we've received all the results. put to map
  264.          {
  265.            // sort the returned values into their correct order
  266.            unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
  267.            var count = 0;
  268.            for (var key in unsortedResults) {
  269.              if (unsortedResults[key].result != null) {
  270.                if (unsortedResults.hasOwnProperty(key)) {
  271.                  if (count == 0) // first results. new up the combinedResults object
  272.                  combinedResults = unsortedResults[key].result;
  273.                  else {
  274.                    // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
  275.                    // directionResults object, but enough to draw a path on the map, which is all I need
  276.                    combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
  277.                    combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
  279.                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
  280.                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
  281.                  }
  282.                  count++;
  283.                }
  284.              }
  285.            }
  286.            directionsDisplay.setDirections(combinedResults);
  287.            var legs = combinedResults.routes[0].legs;
  288.            // alert(legs.length);
  289.            for (var i=0; i < legs.length;i++){
  290.              var markerletter = "A".charCodeAt(0);
  291.              markerletter += i;
  292.              markerletter = String.fromCharCode(markerletter);
  293.              createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address,markerletter);
  294.             }
  295.             var i=legs.length;
  296.             var markerletter = "A".charCodeAt(0);
  297.             markerletter += i;
  298.             markerletter = String.fromCharCode(markerletter);
  299.             createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,"marker"+i,"some text for the "+i+"marker<br>"+legs[legs.length-1].end_address,markerletter);
  300.           }
  301.         }
  302.       });
  303. }
  304.  
  305. </script>
  306. </head>
  307. <body>
  308. <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
  309. <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
  310. <div style="margin:20px;border-width:2px;">
  311. <b>Start:</b>
  312. <select id="start">
  313. <option value="Halifax, NS">Halifax, NS</option>
  314. <option value="Boston, MA">Boston, MA</option>
  315. <option value="New York, NY">New York, NY</option>
  316. <option value="Miami, FL">Miami, FL</option>
  317. </select>
  318. <br>
  319. <b>Waypoints:</b> <br>
  320. <i>(Ctrl-Click for multiple selection)</i> <br>
  321. <select multiple id="waypoints">
  322. <option value="montreal, quebec">Montreal, QBC</option>
  323. <option value="toronto, ont">Toronto, ONT</option>
  324. <option value="chicago, il">Chicago</option>
  325. <option value="winnipeg, mb">Winnipeg</option>
  326. <option value="fargo, nd">Fargo</option>
  327. <option value="calgary, ab">Calgary</option>
  328. <option value="spokane, wa">Spokane</option>
  329. </select>
  330. <br>
  331. <b>End:</b>
  332. <select id="end">
  333. <option value="Vancouver, BC">Vancouver, BC</option>
  334. <option value="Seattle, WA">Seattle, WA</option>
  335. <option value="San Francisco, CA">San Francisco, CA</option>
  336. <option value="Los Angeles, CA">Los Angeles, CA</option>
  337. </select>
  338. <br>
  339. <input type="submit" onclick="initialize(); calcRoute();">
  340. </div>
  341. <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
  342. </div>
  343. </body>
  344. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!