Google Maps: draw two lines in one route (because of directions) - google-maps

Question

I'm using google maps directions api to draw traffic information on map. I want to show my custom traffic info, for both driving directions on one street.
When I request the directions from A to B and from B to A, it renders the 2 routes overlapped, so actually it only shows one route.
var list = [
{ origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
{ origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
];
function calcRoute(entry) {
var request = {
origin: entry.origin,
destination: entry.destination,
travelMode: google.maps.TravelMode["DRIVING"]
};
if (entry.color == 1){
vStrokeColor = "#FF0000"
vzIndex = 100
}else if (entry.color == 2){
vStrokeColor = "#0DFF00"
vzIndex = 1
}
var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true, strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
directionsDisplay.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
Is there a way to achieve this with Google Apis?
Thanks.
UPDATE: Correct GPS coordinates
var list = [
{ origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
{ origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
];
var vStrokeColor;
var vzIndex;
var map;
var directionsService = new google.maps.DirectionsService();
function calcRoute(entry) {
var request = {
origin: entry.origin,
destination: entry.destination,
travelMode: google.maps.TravelMode["DRIVING"]
};
if (entry.color == 1){
vStrokeColor = "#FF0000"
vzIndex = 100
}else if (entry.color == 2){
vStrokeColor = "#0DFF00"
vzIndex = 1
}
var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true, strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
directionsDisplay.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
var myLatlng = new google.maps.LatLng(41.08801, 16.83689);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
calcRoute(list[0]);
calcRoute(list[1]);
}
google.maps.event.addDomListener(window,'load',initialize);
html,body,#map {
height: 100%;
width: 100%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
</script>
<div id="map"></div>