I am using google map and i am bit of stuck at one point. i want to display alternative route for my source and destination point. currently i am using the code which is working perfectly and displaying correct result but the only the problem is that this code displaying only single route for my starting and destination path.
Here is my JSFIDDLE WORKING DEMO
Here is sample code which i am using in jsfiddle demo link:
HTML CODE:
<h1>Calculate your route</h1>
<form id=calculate-route name=calculate-route action=# method=get>
<label for=from>From:</label>
<input type=text id=from name=from required=required placeholder=An address size=30 />
<a id=from-link href=#>Get my position</a>
<br />
<label for=to>To:</label>
<input type=text id=to name=to required=required placeholder=Another address size=30 />
<a id=to-link href=#>Get my position</a>
<br />
<input type=submit />
<input type=reset />
</form>
JS CODE:
<script>
function calculateRoute(from, to) {
// Center initialized to Naples, Italy
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(40.84, 14.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById(map), myOptions);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$(#error).append(Unable to retrieve your route<br />);
}
);
}
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == undefined) {
$(#error).text(Your browser doesn't support the Geolocation API);
return;
}
$(#from-link, #to-link).click(function(event) {
event.preventDefault();
var addressId = this.id.substring(0, this.id.indexOf(-));
navigator.geolocation.getCurrentPosition(function(position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
location: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
$(# + addressId).val(results[0].formatted_address);
else
$(#error).append(Unable to retrieve your address<br />);
});
},
function(positionError){
$(#error).append(Error: + positionError.message + <br />);
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});
$(#calculate-route).submit(function(event) {
event.preventDefault();
calculateRoute($(#from).val(), $(#to).val());
});
});
</script>
you can see in the demo when you enter starting point and destination point it will give you single route accordingly but i need to display alternative route as well in the map.
Is there any way we can choose and display a route between the given options according to the 'distance' or the 'duration in traffic'?
Thanks in advance for your help and much appreciated
