Home/ Questions/Q 8727099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T08:22:36+00:00

I need to create a route in google maps involving multiple waypoints, but google’s

  • 0

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:

<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="PolylineEncoder.js"></script>
<script type="text/javascript">

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 < 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 > 1, i'm get the routes and i create the polyline.
  if (LocationsMarkers.length > 1){

      var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

      for (var a = 0; a < 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 < response.routes.length; i++) {
               for (var i2 = 0; i2 < response.routes[i].legs.length; i2++) { 
                 for (var i3 = 0; i3 < 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]);
}
</script></head>
   <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
   </body>
</html>

Image of map

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should check the return status of the DirectionsService. It is returning OVER_QUERY_LIMIT.

    Note that the maximum number of waypoints in the Google Maps API v3 is 8 (plus origin and destination), unless you pay (Maps API for Business).

    If you check the status and retry after a delay if the error is OVER_QUERY_LIMIT, it will eventually finish:

    http://www.geocodezip.com/geoxml3_test/v3_directions_multipleWayPts.html

    • 0