Javascript required
Skip to content Skip to sidebar Skip to footer
Home / Google Maps Drawing Mutiple Areas

Google Maps Drawing Mutiple Areas

  • Updated date Apr 16, 2020
  • 317k
  • 6

Google Maps are limited to 10 locations but this article shows how to draw a route with more than 10 locations on Google Maps with API V3.

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();

  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.     };
  10.     map =new  google.maps.Map(document.getElementById( "dvMap" ), myOptions);
  13.     _directionsRenderer.setMap(map);
  17.     _directionsRenderer.setOptions({
  18.         draggable:true
  19.     });
  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.     });
  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

  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) {
  20. var  _waypoints = new  Array();
  22. if  (Points.length > 2)
  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
  30.                 });
  31.             }
  32.         }
  34.         drawRoute(Points[0], Points[Points.length - 1], _waypoints);
  35.     }else if  (Points.length > 1) {
  37.         drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
  38.     }else  {
  40.         drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
  41.     }
  42. }

3. Draw the route

  2. function  drawRoute(originAddress, destinationAddress, _waypoints) {
  4. var  _request = '' ;
  7. if  (_waypoints.length > 0) {
  8.         _request = {
  9.             origin: originAddress,
  10.             destination: destinationAddress,
  11.             waypoints: _waypoints,
  12.             optimizeWaypoints:true ,
  13.             travelMode: google.maps.DirectionsTravelMode.DRIVING
  14.         };
  15.     }else  {
  17.         _request = {
  18.             origin: originAddress,
  19.             destination: destinationAddress,
  20.             travelMode: google.maps.DirectionsTravelMode.DRIVING
  21.         };
  22.     }
  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.

Google Maps Drawing Mutiple Areas

Source: https://www.c-sharpcorner.com/UploadFile/8911c4/how-to-draw-infinite-route-with-more-than-10-locations-on-go/