DirectionsService not working as required by the code - google-maps

Question

I am trying to make routes between any 2 locations I pass using DirectionsService of google maps. The locations are coming to me dynamically. But the problem I am facing is when the next 2 coordinates come it removes the previous route and displays the new route with the new coordinaates. I also can't use the waypoints because max. 8 waypoints are allowed and I need more than that.
here is my code:
var marker;
var map;
var mapOptions;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {
var rendererOptions = {
map : map,
suppressMarkers : true
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
mapOptions = {
zoom: 12,
center: new google.maps.LatLng(23.53265,77.754812)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
}
//var image = 'C:\Users\Samir\Desktop\download.jpg';
var start = new google.maps.LatLng(23.32654,77.32685);
function Plot_Data(latlng){
//end = new google.maps.LatLng(lat,lng);
marker = new google.maps.Marker({
position: latlng ,
map: map
});
var request = {
origin:start,
destination:latlng,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
start = latlng;
}

Answer 1

A directionsRenderer will display only one route at a time. This will add a new one for each time you call the Plot_Data function, but will still be subject to the API rate and query limits:
var marker;
var map;
var mapOptions;
var directionsDisplay = [];
var directionsService = new google.maps.DirectionsService();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {
var rendererOptions = {
map : map,
suppressMarkers : true
}
directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions));
mapOptions = {
zoom: 12,
center: new google.maps.LatLng(23.53265,77.754812)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
}
//var image = 'C:\Users\Samir\Desktop\download.jpg';
var start = new google.maps.LatLng(23.32654,77.32685);
function Plot_Data(latlng){
//end = new google.maps.LatLng(lat,lng);
marker = new google.maps.Marker({
position: latlng ,
map: map
});
var request = {
origin:start,
destination:latlng,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay[directionsDisplay.length-1].setDirections(response);
directionsDisplay[directionsDisplay.length-1].setMap(map);
directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions));
} else alert("directions request failed: " +status);
});
start = latlng;
}