Introduction

Everyone knows that we can choose 10 locations and draw a route among these locations on a Google Map using API V3. This is a Google Maps limitation. But today I will show how to draw an infinite route with more than 10 locations on a Google Map with API V3.
This article will help you to solve the following problems:
  1. How to draw a route on the fly.
  2. How to draw an infinite route with more than 10 locations.
See the following image where I have drawn the infinite route with more than 10 locations on it.
Google Map
In this picture, the red route has more than 10 points for the route. Here there are 14 locations, an infinite route.
The following is another example:
Google Map1
JavaScript Code
1. Initialize the map on page load
//You can calculate directions (using a variety of methods of transportation) by using the DirectionsService object.
var directionsService = new google.maps.DirectionsService();
//Define a variable with all map points.
var _mapPoints = new Array();
//Define a DirectionsRenderer variable.
var _directionsRenderer = '';
//This will give you the map zoom value.
var zoom_option = 6;
//LegPoints is your route points between two locations.
var LegPoints = new Array();
//Google map object
var map;
//InitializeMap() function is used to initialize google map on page load.
function InitializeMap() {
//DirectionsRenderer() is a used to render the direction
_directionsRenderer = new google.maps.DirectionsRenderer();
  1. //Set the your own options for map.
  2. var myOptions = {
  3. zoom: zoom_option,
  4. zoomControl: true,
  5. center: new google.maps.LatLng(21.7679, 78.8718),
  6. mapTypeId: google.maps.MapTypeId.ROADMAP
  7. };
  9. //Define the map.
  10. map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
  12. //Set the map for directionsRenderer
  13. _directionsRenderer.setMap(map);
  15. //Set different options for DirectionsRenderer mehtods.
  16. //draggable option will used to drag the route.
  17. _directionsRenderer.setOptions({
  18. draggable: true
  19. });
  21. //Add the doubel click event to map.
  22. google.maps.event.addListener(map, "dblclick", function(event) {
  23. var _currentPoints = event.latLng;
  24. _mapPoints.push(_currentPoints);
  25. LegPoints.push('');
  26. getRoutePointsAndWaypoints(_mapPoints);
  27. });
  29. //Add the directions changed event to map.
  30. google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
  31. var myroute = _directionsRenderer.directions.routes[0];
  32. CreateRoute(myroute);
  33. zoom_option = map.getZoom();
  34. });
  35. }
2. Get the route points and waypoints
  1. //getRoutePointsAndWaypoints() will help you to pass points and waypoints to drawRoute() function
  2. function getRoutePointsAndWaypoints(Points) {
  3. if (Points.length <= 10) {
  4. drawRoutePointsAndWaypoints(Points);
  5. }
  6. else {
  7. var newPoints = new Array();
  8. var startPoint = Points.length - 10;
  9. var Legs = Points.length - 10;
  10. for (var i = startPoint; i < Points.length; i++) {
  11. newPoints.push(Points[i]);
  12. }
  13. drawRoutePointsAndWaypoints(newPoints);
  14. drawPreviousRoute(Legs);
  15. }
  16. }
  18. function drawRoutePointsAndWaypoints(Points) {
  19. //Define a variable for waypoints.
  20. var _waypoints = new Array();
  22. if (Points.length > 2) //Waypoints will be come.
  23. {
  24. for (var j = 1; j < Points.length - 1; j++) {
  25. var address = Points[j];
  26. if (address !== "") {
  27. _waypoints.push({
  28. location: address,
  29. stopover: true //stopover is used to show marker on map for waypoints
  30. });
  31. }
  32. }
  33. //Call a drawRoute() function
  34. drawRoute(Points[0], Points[Points.length - 1], _waypoints);
  35. } else if (Points.length > 1) {
  36. //Call a drawRoute() function only for start and end locations
  37. drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
  38. } else {
  39. //Call a drawRoute() function only for one point as start and end locations.
  40. drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
  41. }
  42. }
3. Draw the route
  1. //drawRoute() will help actual draw the route on map.
  2. function drawRoute(originAddress, destinationAddress, _waypoints) {
  3. //Define a request variable for route .
  4. var _request = '';
  6. //This is for more then two locatins
  7. if (_waypoints.length > 0) {
  8. _request = {
  9. origin: originAddress,
  10. destination: destinationAddress,
  11. waypoints: _waypoints, //an array of waypoints
  12. optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.
  13. travelMode: google.maps.DirectionsTravelMode.DRIVING
  14. };
  15. } else {
  16. //This is for one or two locations. Here noway point is used.
  17. _request = {
  18. origin: originAddress,
  19. destination: destinationAddress,
  20. travelMode: google.maps.DirectionsTravelMode.DRIVING
  21. };
  22. }
  24. //This will take the request and draw the route and return response and status as output
  25. directionsService.route(_request, function(_response, _status) {
  26. if (_status == google.maps.DirectionsStatus.OK) {
  27. _directionsRenderer.setDirections(_response);
  28. }
  29. });
  30. }
Notes:
  1. I have used waypoints to draw the routes.
  2. In this article, I have made all necessary JavaScript code comments in the "googlemap.js" JavaScript file.
  3. So I am not explaining the JavaScript code.
  4. Please download the attachment for more details about the code.
  5. I have used the Google Map API v3 for this article.
Please comment on this article for better improvement and I hope you enjoy the article.