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:
- How to draw a route on the fly.
- 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 then 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();
//Set the your own options for map.
var myOptions = {
zoom: zoom_option,
zoomControl: true,
center: new google.maps.LatLng(21.7679, 78.8718),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Define the map.
map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
//Set the map for directionsRenderer
_directionsRenderer.setMap(map);
//Set different options for DirectionsRenderer mehtods.
//draggable option will used to drag the route.
_directionsRenderer.setOptions({
draggable: true
});
//Add the doubel click event to map.
google.maps.event.addListener(map, "dblclick", function(event) {
var _currentPoints = event.latLng;
_mapPoints.push(_currentPoints);
LegPoints.push('');
getRoutePointsAndWaypoints(_mapPoints);
});
//Add the directions changed event to map.
google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
var myroute = _directionsRenderer.directions.routes[0];
CreateRoute(myroute);
zoom_option = map.getZoom();
});
}
2. Get the route points and waypoints
//getRoutePointsAndWaypoints() will help you to pass points and waypoints to drawRoute() function
function getRoutePointsAndWaypoints(Points) {
if (Points.length <= 10) {
drawRoutePointsAndWaypoints(Points);
}
else {
var newPoints = new Array();
var startPoint = Points.length - 10;
var Legs = Points.length - 10;
for (var i = startPoint; i < Points.length; i++) {
newPoints.push(Points[i]);
}
drawRoutePointsAndWaypoints(newPoints);
drawPreviousRoute(Legs);
}
}
function drawRoutePointsAndWaypoints(Points) {
//Define a variable for waypoints.
var _waypoints = new Array();
if (Points.length > 2) //Waypoints will be come.
{
for (var j = 1; j < Points.length - 1; j++) {
var address = Points[j];
if (address !== "") {
_waypoints.push({
location: address,
stopover: true //stopover is used to show marker on map for waypoints
});
}
}
//Call a drawRoute() function
drawRoute(Points[0], Points[Points.length - 1], _waypoints);
} else if (Points.length > 1) {
//Call a drawRoute() function only for start and end locations
drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
} else {
//Call a drawRoute() function only for one point as start and end locations.
drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
}
}
3. Draw the route
//drawRoute() will help actual draw the route on map.
function drawRoute(originAddress, destinationAddress, _waypoints) {
//Define a request variable for route .
var _request = '';
//This is for more then two locatins
if (_waypoints.length > 0) {
_request = {
origin: originAddress,
destination: destinationAddress,
waypoints: _waypoints, //an array of waypoints
optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
} else {
//This is for one or two locations. Here noway point is used.
_request = {
origin: originAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
}
//This will take the request and draw the route and return response and status as output
directionsService.route(_request, function(_response, _status) {
if (_status == google.maps.DirectionsStatus.OK) {
_directionsRenderer.setDirections(_response);
}
});
}
Notes:
-
I have used waypoints to draw the routes.
-
In this article I have made all necessary JavaScript code comments in the "googlemap.js" JavaScript file.
-
So I am not explaining the JavaScript code.
-
Please download the attachment for more details about the code.
-
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.