title: Make polylines based on routing on Google Maps
body: <p>I need to create a route in google maps involving multiple waypoints, but google's API does not allow more than 23 waypoints into a route. As a solution coded in order to add markers and draw routes between markers using polylines. The code worked perfectly, but stopped at one point generating the route in half, anyone know if this is more a limitation of Google Maps?
  source code:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="PolylineEncoder.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var geocoder;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var trafficLayer;
  var bikeLayer;
  var poly;
  var LocationsMarkers = []; 
  var Employees =[];
  var latlngCenter;
  
  function GetMarkers(){
    for (var i = 0; i &lt; Employees.length; i++) {
      var Employee = Employees[i];
      var myLatLng = new google.maps.LatLng(Employee[1], Employee[2]);
  
      // Add the location to vector for routing
      LocationsMarkers.push(new google.maps.LatLng(Employee[1], Employee[2]));
  
      // Add a marker
      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: Employee[0],
          zIndex: Employee[3]
      });
    }
  
    // If the length of LocationMarkers &gt; 1, i'm get the routes and i create the polyline.
    if (LocationsMarkers.length &gt; 1){
  
        var polyOptions = {
          strokeColor: '#000000',
          strokeOpacity: 1.0,
          strokeWeight: 3
        }
        poly = new google.maps.Polyline(polyOptions);
        poly.setMap(map);
  
        for (var a = 0; a &lt; LocationsMarkers.length; a++) {
            calcRoute(LocationsMarkers[a], LocationsMarkers[a+1]);
        }
    }
  }
  
  // calculate the route on the markers.
  function calcRoute(start, end) {
  
      var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.WALKING
      };
      var path = poly.getPath();        
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
              for (var i = 0; i &lt; response.routes.length; i++) {
                 for (var i2 = 0; i2 &lt; response.routes[i].legs.length; i2++) { 
                   for (var i3 = 0; i3 &lt; response.routes[i].legs[i2].steps.length; i3++) {              
                     // add the start and end location by the legs of routes on the path to the polyline
                     path.push(response.routes[i].legs[i2].steps[i3].start_location);
                     path.push(response.routes[i].legs[i2].steps[i3].end_location);
                   }
                 }
              }
      }
      });
  }
  
  function TrafficOn()     { trafficLayer.setMap(map); }
  function TrafficOff()    { trafficLayer.setMap(null); }
  function BicyclingOn()   { bikeLayer.setMap(map); }
  function BicyclingOff()  { bikeLayer.setMap(null);}
  function StreetViewOn()  { map.set("streetViewControl", true); }
  function StreetViewOff() { map.set("streetViewControl", false); }
  
  function initialize() {
      geocoder = new google.maps.Geocoder();
  
      CollectData();
  
      var myOptions = {
         zoom: 18,
         center: latlngCenter,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }; 
  
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      trafficLayer = new google.maps.TrafficLayer();
      bikeLayer = new google.maps.BicyclingLayer();
      GetMarkers();
  }
  
  function CollectData(){
   // In this example I used only 20 markers, but there will be situations where I have  to show more than 50.          
   Employees = [["1",-20.14669,-44.888862 , 1],
              ["2",-20.1454,-44.892467 , 2],
              ["3",-20.14403,-44.890579 , 3],
              ["4",-20.142741,-44.886716 , 4],
              ["5",-20.143668,-44.885922 ,5],
              ["6",-20.14256,-44.885579  ,6],
              ["7",-20.141512,-44.885879 ,7],
              ["8",-20.140465,-44.885997 ,8],
              ["9",-20.138722,-44.88545  ,9],
              ["10",-20.137886,-44.887071,10],
              ["11",-20.137201,-44.891106,11],
              ["12",-20.137483,-44.892157,12],
              ["13",-20.138047,-44.893251,13],
              ["14",-20.138631,-44.894303,14],
              ["15",-20.139296,-44.895311,15],
              ["16",-20.138208,-44.895204,16],
              ["17",-20.136476,-44.895569,17],
              ["18",-20.137765,-44.897049,18],
              ["19",-20.138067,-44.899238,19],
              ["20",-20.138994,-44.900461,20] ];
  
    latlngCenter = new google.maps.LatLng(Employees[0][1],Employees[0][2]);
  }
  &lt;/script&gt;&lt;/head&gt;
     &lt;body onload="initialize()"&gt;
          &lt;div id="map_canvas" style="width:100%; height:100%"&gt;
          &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/jw95e.png" alt="Image of map"></p>