straight line is coming along with road map in google map API - google-maps

Question

I have one query regarding google map api .
I am drawing road map line between two Geo location(Suppose A and B) through one Geo point (Suppose C).
Problem is : First time when map is loaded there is always one straight line between point A and point B along with road map among these three points (A , B and C). But when map is reloaded again then straight line (Between A and B) vanishes as expected.
Could you please help me in this regard. My code is following.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Alibaug',
"lat": '28.4700',
"lng": '77.0300',
"description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.'
}
,
{
"title": 'Mumbai',
"lat": '28.6139',
"lng": '77.2090',
"description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
}
,
{
"title": 'Pune',
"lat": '28.5700',
"lng": '77.3200',
"description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
}
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng[i]=myLatlng;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
latlngbounds.extend(marker.position);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
} } );
} } }
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>

Answer 1

Only send a single request. The Google Maps Directions Service supports waypoints if you have less than 10 total points (with the free API, 25 total points with Google Maps for Business), you can use a single request, with a source, a destination and a waypoint, which will reduce the load on Google servers and make the response more consistent.
One possible reason for the behavior you are seeing is the asynchronous behavior of the Directions Service. If the responses come back in a different order than they are sent, you could see the behavior you are describing.
proof of concept fiddle
code snippet:
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = [];
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng[i] = myLatlng;
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
latlngbounds.extend(marker.position);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7'
});
//Loop and Draw Path Route between the Points on MAP
var request = {
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
for (var i = 0; i < lat_lng.length; i++) {
if (i == 0) {
request.origin = lat_lng[i];
} else if (i == lat_lng.length - 1) {
request.destination = lat_lng[i];
} else {
if (!request.waypoints) {
request.waypoints = [];
}
request.waypoints.push({
location: lat_lng[i]
});
}
}
service.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
}
});
};
var markers = [{
"title": 'Alibaug',
"lat": '28.4700',
"lng": '77.0300',
"description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.'
}, {
"title": 'Mumbai',
"lat": '28.6139',
"lng": '77.2090',
"description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
}, {
"title": 'Pune',
"lat": '28.5700',
"lng": '77.3200',
"description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
}
];
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap" style="width: 500px; height: 500px">