I have Code for draw infinite route with more than 10 locations, it will effect when mouse clicking on map event.I need to write script for latlng values call from database without clicking on mouse click event in map.
http://www.c-sharpcorner.com/uploadfile/8911c4/how-to-draw-infinite-route-with-more-than-10-locations-on-go/ please edit bellow code:
var directionsService = new google.maps.DirectionsService();
var _mapPoints = new Array();
var _directionsRenderer = '';
var zoom_option = 6;
var LegPoints = new Array();
var map;
function InitializeMap()
{
_directionsRenderer = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: zoom_option,
zoomControl: true,
center: new google.maps.LatLng(21.7679, 78.8718),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
_directionsRenderer.setMap(map);
_directionsRenderer.setOptions({
draggable: true
});
google.maps.event.addListener(map, "dblclick", function(event) {
var _currentPoints = event.latLng;
_mapPoints.push(_currentPoints);
LegPoints.push('');
getRoutePointsAndWaypoints(_mapPoints) ;
});
google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
var myroute = _directionsRenderer.directions.routes[0];
CreateRoute(myroute);
zoom_option = map.getZoom();
});
}
function CreateRoute(myroute)
{
var index = 0;
if (_mapPoints.length > 10) {
index = _mapPoints.length - 10;
}
for (var i = 0; i < myroute.legs.length; i++) {
saveLegPoints(myroute.legs[i], index);
index = index + 1;
}
}
function saveLegPoints(leg, index)
{
var points = new Array();
for (var i = 0; i < leg.steps.length; i++) {
for (var j = 0; j < leg.steps[i].lat_lngs.length; j++) {
points.push(leg.steps[i].lat_lngs[j]);
}
}
LegPoints[index] = points;
}
function drawPreviousRoute(Legs)
{
var segPointValue = new Array();
for (var i = 0; i < Legs; i++) {
var innerArry = LegPoints[i];
for (var j = 0; j < innerArry.length; j++) {
segPointValue.push(innerArry[j]);
}
addPreviousMarker(innerArry[0]);
}
var polyOptions = {
path: segPointValue,
strokeColor: '#F75C54',
strokeWeight: 3
};
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
function addPreviousMarker(myLatlng)
{
var marker = new google.maps.Marker({
position: myLatlng,
icon: "Images/red-circle.png",
title: ""
});
marker.setMap(map);
}
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)
{
var _waypoints = new Array();
if (Points.length > 2)
{
for (var j = 1; j < Points.length - 1; j++) {
var address = Points[j];
if (address !== "") {
_waypoints.push({
location: address,
stopover: true
});
}
}
drawRoute(Points[0], Points[Points.length - 1], _waypoints);
}
else if (Points.length > 1) {
drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
}
else {
drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
}
}
function drawRoute(originAddress, destinationAddress, _waypoints)
{
var _request = '';
if (_waypoints.length > 0) {
_request = {
origin: originAddress,
destination: destinationAddress,
waypoints: _waypoints,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
}
else {
_request = {
origin: originAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
}
directionsService.route(_request, function(_response, _status) {
if (_status == google.maps.DirectionsStatus.OK) {
_directionsRenderer.setDirections(_response);
}
});
}