2015-06-23 3 views
0

Я выяснил способ визуализации нескольких направлений вручную на Картах Google. У меня есть восемнадцать направлений, которые я хочу отобразить на карте, но последние два направления (routeSeventeen и routeEighteen) по какой-то причине не загружаются.В Google Maps API не загружаются два направления:

<html> 
<head> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
<script> 
function initialize() { 
    var goo   = google.maps, 
     map   = new goo.Map(document.getElementById('map-canvas'), 
            { 
            center : new goo.LatLng(-25.274398, 133.775136), 
            zoom : 2 
            } 
           ), 
     App   = { map    : map, 
         bounds   : new goo.LatLngBounds(), 
         directionsService : new goo.DirectionsService(),  
         directionsDisplay1: new goo.DirectionsRenderer({ 
               map    : map, 
               preserveViewport: true, 
               suppressMarkers : true, 
               polylineOptions : {strokeColor:'green'}, 
               panel   : document.getElementById('panel').appendChild(document.createElement('li'))}), 
         directionsDisplay2: new goo.DirectionsRenderer({ 
               map    : map, 
               preserveViewport: true, 
               suppressMarkers : true, 
               polylineOptions : {strokeColor:'green'}, 
               panel   : document.getElementById('panel').appendChild(document.createElement('li'))}), 
         directionsDisplay3: new goo.DirectionsRenderer({ 
               map    : map, 
               preserveViewport: true, 
               suppressMarkers : true, 
               polylineOptions : {strokeColor:'green'}, 
               panel   : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay4: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay5: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
              directionsDisplay6: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay7: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
              directionsDisplay8: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay9: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay10: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay11: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay12: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay13: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay14: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay15: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel  : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay16: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers : true, 
              polylineOptions : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay17: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers  : true, 
              polylineOptions  : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li'))}), 
        directionsDisplay18: new goo.DirectionsRenderer({ 
              map : map, 
              preserveViewport : true, 
              suppressMarkers  : true, 
              polylineOptions  : {strokeColor:'green'}, 
              panel : document.getElementById('panel').appendChild(document.createElement('li')) 
}) 
      }, 
     routeOne = { origin  : 'Sydney, NSW', 
         destination : 'Brisbane, QLD', //Pacific Highway - coast 
         travelMode : goo.TravelMode.DRIVING},   
     routeTwo = { origin  : 'Hexham, NSW', 
         destination : 'Yarraman, QLD', 
         travelMode : goo.TravelMode.DRIVING},   
     routeThree = { origin  : 'Sydney, NSW', 
         destination : 'Melbourne, VIC', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeFour = { origin  : 'Sydney, NSW', 
         destination : 'Adelaide, SA', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeFive = { origin  : 'Sydney, NSW', 
         destination : 'Perth, WA', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeSix = { origin  : 'Sydney, NSW', 
         destination : 'Darwin, NT', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeSeven = { origin  : 'Melbourne, VIC', 
         destination : 'Adelaide, SA', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeEight = { origin  : 'Melbourne, VIC', 
         destination : 'Perth, WA', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeNine = { origin  : 'Melbourne, VIC', 
         destination : 'Darwin, NT', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeTen = { origin  : 'Melbourne, VIC', 
         destination : 'Brisbane, QLD', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeEleven = { origin  : 'Adelaide, SA', 
         destination : 'Perth, WA', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeTwelve = { origin  : 'Adelaide, SA', 
         destination : 'Darwin, NT', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeThirteen = {origin  : 'Adelaide, SA', 
         destination : 'Brisbane, QLD', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeFourteen = { origin  : 'Perth, WA', 
         destination : 'Darwin, NT', 
         travelMode : goo.TravelMode.DRIVING}, 
     routeFifteen = { origin  : 'Perth, WA', 
          destination : 'Brisbane, QLD', 
          travelMode : goo.TravelMode.DRIVING}, 
     routeSixteen = {origin  : 'Darwin, NT', 
         destination : 'Brisbane, QLD', 
     travelMode : goo.TravelMode.DRIVING}, 
     routeSeventeen = {origin  : 'Hobart, TAS', 
          destination : 'Burnie, TAS', 
          travelMode : goo.TravelMode.DRIVING}, 
     routeEighteen = { origin : 'Perth, WA', 
          destination : 'Port Hedland, WA', 
     travelMode : goo.TravelMode.DRIVING}; 

     App.directionsService.route(routeOne, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay1.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

     App.directionsService.route(routeTwo, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay2.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

     App.directionsService.route(routeThree, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay3.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

    App.directionsService.route(routeFour, function(result, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       App.directionsDisplay4.setDirections(result); 
       App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
      } 
      }); 

App.directionsService.route(routeFive, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay5.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

    App.directionsService.route(routeSix, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay6.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

App.directionsService.route(routeSeven, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay7.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

App.directionsService.route(routeEight, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      App.directionsDisplay8.setDirections(result); 
      App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
     }); 

    App.directionsService.route(routeNine, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay9.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeTen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay10.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeEleven, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay11.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeTwelve, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay12.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeThirteen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay13.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeFourteen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay14.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeFifteen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay15.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeSixteen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay16.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeSeventeen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay17.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 

    App.directionsService.route(routeEighteen, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
    App.directionsDisplay18.setDirections(result); 
    App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
     } 
    }); 
    } 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
     #panel li:before{ 

     padding: 3px; 
     display:block; 
     color:#fff; 
     font-weight:bold; 
     } 

</style> 
</head> 
<body> 
<div id="map-canvas"></div> 
<ol id="panel"></ol> 
</body> 
</html> 

Кто-нибудь знает, почему маршруты в Хобарте-Бурни и Перт-Port Hedland не отображаются на экране?

+0

Любые ошибки в консоли JS? Являются ли они самими маршрутами или их положением в списке, который вызывает сбой? – Yaniv

+0

Удивительно, что в консоли JS нет никаких ошибок рендеринга. –

+0

Обращайтесь к моему другому вопросу: это сами маршруты или их позиция в списке, который вызывает сбой? – Yaniv

ответ

2

Вы не должны молча игнорировать ошибки.

App.directionsService.route(routeOne, function (result, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     App.directionsDisplay1.setDirections(result); 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
    } else { 
     document.getElementById('status').innerHTML += "directionsDisplay1:"+status+"<br>"; 
    } 
}); 

Вы получаете статус, возвращаемый из OVER_QUERY_LIMIT (для меня в этом примере для всего после 10-го маршрута):

 
directionsDisplay11:OVER_QUERY_LIMIT 
directionsDisplay12:OVER_QUERY_LIMIT 
directionsDisplay13:OVER_QUERY_LIMIT 
directionsDisplay14:OVER_QUERY_LIMIT 
directionsDisplay15:OVER_QUERY_LIMIT 
directionsDisplay16:OVER_QUERY_LIMIT 
directionsDisplay17:OVER_QUERY_LIMIT 
directionsDisplay18:OVER_QUERY_LIMIT 

fiddle

фрагмент кода:

function initialize() { 
 
    var goo = google.maps, 
 
    map = new goo.Map(document.getElementById('map-canvas'), { 
 
     center: new goo.LatLng(-25.274398, 133.775136), 
 
     zoom: 2 
 
    }), 
 
    App = { 
 
     map: map, 
 
     bounds: new goo.LatLngBounds(), 
 
     directionsService: new goo.DirectionsService(), 
 
     directionsDisplay1: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay2: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay3: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay4: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay5: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay6: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay7: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay8: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay9: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay10: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay11: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay12: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay13: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay14: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay15: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay16: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay17: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }), 
 
     directionsDisplay18: new goo.DirectionsRenderer({ 
 
     map: map, 
 
     preserveViewport: true, 
 
     suppressMarkers: true, 
 
     polylineOptions: { 
 
      strokeColor: 'green' 
 
     }, 
 
     panel: document.getElementById('panel').appendChild(document.createElement('li')) 
 
     }) 
 
    }, 
 
    routeOne = { 
 
     origin: 'Sydney, NSW', 
 
     destination: 'Brisbane, QLD', //Pacific Highway - coast 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeTwo = { 
 
     origin: 'Hexham, NSW', 
 
     destination: 'Yarraman, QLD', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeThree = { 
 
     origin: 'Sydney, NSW', 
 
     destination: 'Melbourne, VIC', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeFour = { 
 
     origin: 'Sydney, NSW', 
 
     destination: 'Adelaide, SA', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeFive = { 
 
     origin: 'Sydney, NSW', 
 
     destination: 'Perth, WA', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeSix = { 
 
     origin: 'Sydney, NSW', 
 
     destination: 'Darwin, NT', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeSeven = { 
 
     origin: 'Melbourne, VIC', 
 
     destination: 'Adelaide, SA', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeEight = { 
 
     origin: 'Melbourne, VIC', 
 
     destination: 'Perth, WA', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeNine = { 
 
     origin: 'Melbourne, VIC', 
 
     destination: 'Darwin, NT', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeTen = { 
 
     origin: 'Melbourne, VIC', 
 
     destination: 'Brisbane, QLD', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeEleven = { 
 
     origin: 'Adelaide, SA', 
 
     destination: 'Perth, WA', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeTwelve = { 
 
     origin: 'Adelaide, SA', 
 
     destination: 'Darwin, NT', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeThirteen = { 
 
     origin: 'Adelaide, SA', 
 
     destination: 'Brisbane, QLD', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeFourteen = { 
 
     origin: 'Perth, WA', 
 
     destination: 'Darwin, NT', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeFifteen = { 
 
     origin: 'Perth, WA', 
 
     destination: 'Brisbane, QLD', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeSixteen = { 
 
     origin: 'Darwin, NT', 
 
     destination: 'Brisbane, QLD', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeSeventeen = { 
 
     origin: 'Hobart, TAS', 
 
     destination: 'Burnie, TAS', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }, 
 
    routeEighteen = { 
 
     origin: 'Perth, WA', 
 
     destination: 'Port Hedland, WA', 
 
     travelMode: goo.TravelMode.DRIVING 
 
    }; 
 

 
    App.directionsService.route(routeOne, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay1.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay1:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeTwo, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay2.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay2:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeThree, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay3.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay3:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeFour, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay4.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay4:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeFive, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay5.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay5:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeSix, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay6.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay6:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeSeven, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay7.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay7:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeEight, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay8.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay8:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeNine, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay9.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay9:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeTen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay10.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay10:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeEleven, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay11.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay11:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeTwelve, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay12.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay12:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeThirteen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay13.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay13:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeFourteen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay14.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay14:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeFifteen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay15.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay15:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeSixteen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay16.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay16:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeSeventeen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay17.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay17:" + status + "<br>"; 
 
    } 
 
    }); 
 

 
    App.directionsService.route(routeEighteen, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     App.directionsDisplay18.setDirections(result); 
 
     App.map.fitBounds(App.bounds.union(result.routes[0].bounds)); 
 
    } else { 
 
     document.getElementById('status').innerHTML += "directionsDisplay18:" + status + "<br>"; 
 
    } 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#panel li:before { 
 
    padding: 3px; 
 
    display: block; 
 
    color: #fff; 
 
    font-weight: bold; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="status"></div> 
 
<div id="map-canvas"></div> 
 
<ol id="panel"></ol>

+0

Спасибо за ваш ответ. Если я правильно понимаю, кажется, что существует предел использования, а карта показывает только десять направлений. Я смотрю документ разработчика Google Maps, описывающий, какие ограничения использования. Решения включают в себя либо оптимизацию приложений для более эффективного использования веб-сервисов, либо покупку дополнительного пособия для лицензии GM for Work. Я не могу не чувствовать, что, возможно, что-то неправильно понял. –

+0

, связанный с вопросом OVER_QUERY_LIMIT в Geocoder: [OVER_QUERY_LIMIT в API Карт Google v3: как приостановить/задержать Javascript, чтобы замедлить его?] (Http://stackoverflow.com/questions/11792916/over-query-limit -в-Google-карты-апи-v3-как-делать-я-пауза-задержка-в-JavaScript-к-СЛ) – geocodezip

Смежные вопросы