Two directions won't load in Google Maps API

Question

I've figured out a way to render multiple directions manually in Google Maps. I have eighteen directions I want to display on the map, but the last two directions (routeSeventeen and routeEighteen) aren't loading for some reason.

<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>

Does anyone know why the routes to Hobart-Burnie and Perth-Port Hedland aren't display on screen?

Any errors in the JS console? Is it the routes themselves or their position in the list that is causing the failure? — Yaniv, Jun 23 '15 at 03:12
Surprisingly, there aren't any rendering errors in the JS console at all. — , Jun 23 '15 at 03:16
Please address my other question: is it the routes themselves or their position in the list that is causing the failure? — Yaniv, Jun 23 '15 at 03:19
That's the thing - I have no idea what's causing the error. The code for every other direction works just by calling out the variable i.e. 'routeOne', and then specifying an origin and a destination. I have the code written exactly the same in each destination, yet the last two won't work. I've tried looking if it's caused by a spelling mistake, but that doesn't seem to be the problem either. — , Jun 23 '15 at 03:37
Could you try reordering the routes? It would be good to identify if the issue is with the actually origin/destination pair or with the fact that they are last in your list. — Yaniv, Jun 23 '15 at 03:40
I'm following your advice, and I think you're onto something. I've reordered the last two routes as you suggested, and they show up on screen. The problem is the other routes are getting cancelled out. Could it be a naming problem? `` — , Jun 23 '15 at 04:00
I imagine you're running up against a limit, will take a look and get back to you. — Yaniv, Jun 23 '15 at 04:29

score 2 · Accepted Answer · answered Jun 23 '15 at 09:56

You should not silently ignore errors.

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>";
    }
});

You are getting status returned of OVER_QUERY_LIMIT (for me in this example for everything after the 10th route):

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

code snippet:

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>

Thanks for your response. If I understand it correctly, it seems that there is a usage limit, and map is only showing ten directions. I'm looking at the Google Maps developer document describing what usage limits are. The solutions include either optimizing applications to use web services more efficiently, or buying additional allowance for GM for Work license. I can't help but feel that I might have misunderstood something. — , Jun 23 '15 at 10:55
related question which addresses OVER_QUERY_LIMIT in the Geocoder: [OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?](http://stackoverflow.com/questions/11792916/over-query-limit-in-google-maps-api-v3-how-do-i-pause-delay-in-javascript-to-sl) — geocodezip, Jun 26 '15 at 00:09

Two directions won't load in Google Maps API

1 Answers1