I am working on my project in which I need to calculate distances of 23 driving routes in Google map. I have the code here. The Lat and lng are already set up in js but I only get 10 route distances back in the web. I check the limitations of google maps api but I don't see only 10 limitations for the route direction. I attached the code.... I am wondering whether anybody can help me figure out.....Thank you so much!
<!DOCTYPE html>
<html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<link type="text/css" rel="stylesheet" href="https://s3.amazonaws.com/GTFS/style.css" media="all" />
</head>
<body id="mainBody" onload="initialize()">
<div id="headerImage">
<img src="https://s3.amazonaws.com/GTFS/brt.jpg" height="100" width="180" />
</div>
<header id="mainHeader">
<hgroup id="mainHeaderGroup">
<h1>GTFS Data Visualization & Application</h1>
<br />
<br />
<br />
</hgroup>
</header>
<div id="contentContainer" >
<div id="map_canvas" style="width:0%;height:0%;">
</div>
<br />
<p id="demo">
</p>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(-40.321, 175.54);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var locations = [
['location1', 30.27361,-97.69835, 4],
['location2', 30.273206,-97.700665, 5],
['location3',30.272939,-97.70225, 3],
['location4', 30.272556,-97.704568, 2],
['location5', 30.272509,-97.706226, 4],
['location6', 30.272329,-97.708247, 5],
['location7', 30.271236,-97.710649, 3],
['location8', 30.270419,-97.715, 2],
['location8', 30.270096,-97.717001, 4],
['location9', 30.269698,-97.719604, 5],
['location10', 30.269427,-97.72125, 3],
['location11', 30.268978,-97.724138, 2],
['location12', 30.270096,-97.717001, 4],
['location13', 30.269698,-97.719604, 5],
['location14', 30.269427,-97.72125, 3],
['location15', 30.268978,-97.724138, 2],
['location16', 30.268756,-97.725507, 1],
['location17',30.268704,-97.727634, 2],
['location18', 30.26956,-97.729989, 4],
['location19', 30.269995,-97.731193, 5],
['location20', 30.270893,-97.734212, 3],
['location21', 30.27116,-97.738825, 2],
['location22', 30.271811,-97.741229, 2],
['location23', 30.268756,-97.725507, 1]
];
var i=0;
for (i = 0; i < locations.length - 1; i++) {
var start = new google.maps.LatLng(locations[i][1], locations[i][2]);
var end = new google.maps.LatLng(locations[i + 1][1], locations[i + 1][2]);
var request = {
origin : start,
destination : end,
travelMode : google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request,function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
document.getElementById("demo").innerHTML += "<strong> <br /> <hr />"+ route.legs[0].distance.text + "</strong>";
}
});
}
}
</script>
</div>
</body>
</html>
See Question&Answers more detail:
os 
