Google Maps API Direction Service not showing for more than 10 markers

Question

I'm trying to link different markers on a map together. For now the markers have been hard coded, but they will be fed into the website by tablets sending their GPS locations at timely intervals. For whatever reason, if I input more than 10 markers, the polyline does not show anymore. Can someone help me figure out why that happens ? Thanks.

<html>
    <head>
    </head>

    <body>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var geocoder;
            var map;
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var locations = [
                ['16:58', -20.1672799707871, 57.5069032768888],
                ['17:00', -20.170670813731, 57.5032840805832],
                ['17:01', -20.1712602810727, 57.502503950733],
                ['17:04', -20.166955925865, 57.4892648490453],
                ['17:07', -20.1761991610139, 57.4822988090064],
                ['17:10', -20.1961753165077, 57.4824656045157],
                ['17:13', -20.220309405427, 57.487469732469],
                ['17:16', -20.2342861943874, 57.4996038055266],
                ['17:19', -20.2419951166671, 57.4924547310887],
                ['17:22', -20.2418197976697, 57.4838445649936],
                ['17:25', -20.2417927882899, 57.4821667460937],
                ['17:28', -20.244868944177, 57.4761929726994],
                ['17:31', -20.2494147017248, 57.4751336596163],
                ['17:34', -20.2529453707358, 57.4698643969492],
                ['17:37', -20.2515653985995, 57.4694827601669]
            ];

            function initialize() {
              directionsDisplay = new google.maps.DirectionsRenderer();


              var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: new google.maps.LatLng(-20.23, 57.49),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              });
              directionsDisplay.setMap(map);
              var infowindow = new google.maps.InfoWindow();

              var marker, i;
              var request = {
                travelMode: google.maps.TravelMode.DRIVING
              };
              for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                  position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                  }
                })(marker, i));

                if (i == 0) request.origin = marker.getPosition();
                else if (i == locations.length - 1) request.destination = marker.getPosition();
                else {
                  if (!request.waypoints) request.waypoints = [];
                  request.waypoints.push({
                    location: marker.getPosition(),
                    stopover: true
                  });
                }

              }
              directionsService.route(request, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(result);
                }
              });
            }
            google.maps.event.addDomListener(window, "load", initialize);
        </script>
        <div id="map" style="width: 100%; height: 100%">
        </div>
    </body>
</html>

Maybe I'm missing something but I'm not seeing any google.maps.PolyLine() call — rrd, Jul 12 '17 at 11:47
Related question with example stringing multiple directions requests together: [Google Maps API to get bus route](https://stackoverflow.com/questions/15315347/google-maps-api-to-get-bus-route) — geocodezip, Jul 12 '17 at 12:44
Possible duplicate of [JavaScript Google Maps polylines : issue in connecting all given GPS locations](https://stackoverflow.com/questions/27609872/javascript-google-maps-polylines-issue-in-connecting-all-given-gps-locations) — geocodezip, Jul 12 '17 at 12:46

score 0 · Accepted Answer · answered Jul 12 '17 at 11:54

You can't draw a polyline width of more than 8 points plus the start and destination:

Google Maps Directions :

MAX_WAYPOINTS_EXCEEDED indicates that too many waypoints were provided in the request The maximum allowed waypoints is 8, plus the origin, and destination. ( Google Maps API for Work customers may contain requests with up to 23 waypoints.)

That's because the free API is limited to:

Users of the free API get Up to 8 waypoints (plus origin and destination) allowed in each request and a total of 2,500 directions requests per 24 hour period.

Try splitting your polyline into multiple request

Google Maps API Direction Service not showing for more than 10 markers

1 Answers1