Draw an Infinite Route With Multiple Locations on Google Maps

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.     };  
  8.    
  9.     //Define the map.  
  10.     map = new google.maps.Map(document.getElementById("dvMap"), myOptions);  
  11.    
  12.     //Set the map for directionsRenderer  
  13.     _directionsRenderer.setMap(map);  
  14.    
  15.     //Set different options for DirectionsRenderer mehtods.  
  16.     //draggable option will used to drag the route.  
  17.     _directionsRenderer.setOptions({  
  18.         draggable: true  
  19.     });  
  20.    
  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.     });  
  28.    
  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.     });  
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. }  
  17.    
  18. function drawRoutePointsAndWaypoints(Points) {  
  19.     //Define a variable for waypoints.  
  20.     var _waypoints = new Array();  
  21.    
  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.     }  
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 = '';  
  5.    
  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.     }  
  23.    
  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.     });  
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.


Similar Articles