API tools faq
paste
Advertisement
vvim

Google Maps Draw Route malfunction in Windows

vvim
Jan 1st, 2015
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         html {
  8.             height: 100%
  9.         }
  10.         body {
  11.             height: 100%;
  12.             margin: 0;
  13.             padding: 0
  14.         }
  15.         #map_canvas {
  16.             height: 100%
  17.         }
  18.     </style>
  19.     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
  20.     </script>
  21.     <script type="text/javascript">
  22.         var markers = [];
  23.         var map;
  24.  
  25.         function Tour_startUp(stops) {
  26.             if (!window.tour) window.tour = {
  27.                 updateStops: function(newStops) {
  28.                     stops = newStops;
  29.                 },
  30.                 loadMap: function(map, directionsDisplay) {
  31.                     var myOptions = {
  32.                         zoom: 15,
  33.                         center: new window.google.maps.LatLng(50.9801, 4.97517),
  34.                         mapTypeId: window.google.maps.MapTypeId.ROADMAP
  35.                     };
  36.                     map.setOptions(myOptions);
  37.                     directionsDisplay.setMap(map);
  38.                 },
  39.                 fitBounds: function(map) {
  40.                     var bounds = new window.google.maps.LatLngBounds();
  41.                     jQuery.each(stops, function(key, val) {
  42.                         var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
  43.                         bounds.extend(myLatlng);
  44.                     });
  45.                     map.fitBounds(bounds);
  46.                 },
  47.                 calcRoute: function(directionsService, directionsDisplay) {
  48.                     var batches = [];
  49.                     var itemsPerBatch = 10;
  50.                     var itemsCounter = 0;
  51.                     var wayptsExist = stops.length > 0;
  52.                     while (wayptsExist) {
  53.                         var subBatch = [];
  54.                         var subitemsCounter = 0;
  55.                         for (var j = itemsCounter; j < stops.length; j++) {
  56.                            subitemsCounter++;
  57.                            subBatch.push({
  58.                                location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
  59.                                stopover: true
  60.                            });
  61.                            if (subitemsCounter == itemsPerBatch) break;
  62.                        }
  63.                        itemsCounter += subitemsCounter;
  64.                        batches.push(subBatch);
  65.                        wayptsExist = itemsCounter < stops.length;
  66.                        itemsCounter--;
  67.                    }
  68.                    var combinedResults;
  69.                    var unsortedResults = [{}];
  70.                    var directionsResultsReturned = 0;
  71.                    for (var k = 0; k < batches.length; k++) {
  72.                        var lastIndex = batches[k].length - 1;
  73.                        var start = batches[k][0].location;
  74.                        var end = batches[k][lastIndex].location;
  75.                        var waypts = [];
  76.                        waypts = batches[k];
  77.                        waypts.splice(0, 1);
  78.                        waypts.splice(waypts.length - 1, 1);
  79.                        var request = {
  80.                            origin: start,
  81.                            destination: end,
  82.                            waypoints: waypts,
  83.                            travelMode: window.google.maps.TravelMode.WALKING
  84.                        };
  85.                        (function(kk) {
  86.                            directionsService.route(request, function(result, status) {
  87.                                if (status == window.google.maps.DirectionsStatus.OK) {
  88.                                    var unsortedResult = {
  89.                                        order: kk,
  90.                                        result: result
  91.                                    };
  92.                                    unsortedResults.push(unsortedResult);
  93.                                    directionsResultsReturned++;
  94.                                    if (directionsResultsReturned == batches.length) {
  95.                                        unsortedResults.sort(function(a, b) {
  96.                                            return parseFloat(a.order) - parseFloat(b.order);
  97.                                        });
  98.                                        var count = 0;
  99.                                        for (var key in unsortedResults) {
  100.                                            if (unsortedResults[key].result != null) {
  101.                                                if (unsortedResults.hasOwnProperty(key)) {
  102.                                                    if (count == 0) combinedResults = unsortedResults[key].result;
  103.                                                    else {
  104.                                                        combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
  105.                                                        combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
  106.                                                        combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
  107.                                                        combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
  108.                                                    }
  109.                                                    count++;
  110.                                                }
  111.                                            }
  112.                                        }
  113.                                        directionsDisplay.setDirections(combinedResults);
  114.                                    }
  115.                                }
  116.                            });
  117.                        })(k);
  118.                    }
  119.                }
  120.            };
  121.        }
  122.  
  123.        function initialize() {
  124.            var stops = [{
  125.                "Geometry": {
  126.                    "Latitude": 50.9799,
  127.                    "Longitude": 4.97229
  128.                }
  129.            }, {
  130.                "Geometry": {
  131.                    "Latitude": 50.8069,
  132.                    "Longitude": 4.9214
  133.                }
  134.            }, {
  135.                "Geometry": {
  136.                    "Latitude": 50.8639,
  137.                    "Longitude": 4.69594
  138.                }
  139.            }, {
  140.                "Geometry": {
  141.                    "Latitude": 50.7226,
  142.                    "Longitude": 4.62634
  143.                }
  144.            }, {
  145.                "Geometry": {
  146.                    "Latitude": 50.7541,
  147.                    "Longitude": 4.98607
  148.                }
  149.            }, {
  150.                "Geometry": {
  151.                    "Latitude": 50.637,
  152.                    "Longitude": 5.90936
  153.                }
  154.            }, {
  155.                "Geometry": {
  156.                    "Latitude": 50.9463,
  157.                    "Longitude": 5.69475
  158.                }
  159.            }, {
  160.                "Geometry": {
  161.                    "Latitude": 50.9499,
  162.                    "Longitude": 5.484
  163.                }
  164.            }, {
  165.                "Geometry": {
  166.                    "Latitude": 50.9799,
  167.                    "Longitude": 4.97229
  168.                }
  169.            }];
  170.            var myOptions = {
  171.                center: new google.maps.LatLng(50.9801, 4.97517),
  172.                zoom: 15,
  173.                mapTypeId: google.maps.MapTypeId.ROADMAP,
  174.                panControl: true
  175.            };
  176.            map = new window.google.maps.Map(document.getElementById("map_canvas"), myOptions);
  177.            var directionsDisplay = new window.google.maps.DirectionsRenderer();
  178.            var directionsService = new window.google.maps.DirectionsService();
  179.            Tour_startUp(stops);
  180.            window.tour.loadMap(map, directionsDisplay);
  181.            if (stops.length > 1) window.tour.calcRoute(directionsService, directionsDisplay);
  182.         };
  183.     </script>
  184. </head>
  185.  
  186. <body onLoad='initialize()'>
  187.     <div id="map_canvas" style="width:100%;height:100%"> </div>
  188. </body>
  189.  
  190. </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!