Guidance Solution for Magento, Php developers: Google Maps Calculate Distance,Travel Duration, draw (plot) Route and display Directions between two locations

Wednesday 22 June 2016

Google Maps Calculate Distance,Travel Duration, draw (plot) Route and display Directions between two locations

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txtSource'));
new google.maps.places.SearchBox(document.getElementById('txtDestination'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});

function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));

//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;

var request = {
origin: source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});

//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
dvDistance.innerHTML += "Duration:" + duration;

} else {
alert("Unable to find the distance via road.");
}
});
}
</script>
<body onLoad="GetRoute();">
<table border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td colspan="2"> Source:
<input type="text" id="txtSource" value="Behror, Rajasthan, India" style="width: 250px" placeholder="Enter a query" autocomplete="off">
   Destination:
<input type="text" id="txtDestination" value="Jaipur, Rajasthan, India" style="width: 250px" placeholder="Enter a query" autocomplete="off">
<br>
<br>
<input type="button" value="Get Route" onclick="GetRoute()">
<hr></td>
</tr>
<tr>
<td colspan="2"><div id="dvDistance"> </div></td>
</tr>
<tr>
<td><div id="dvMap" style="width: 500px; height: 500px"> </div></td>
<td><div id="dvPanel" style="width: 500px; height: 500px;overflow-y:auto"> </div></td>
</tr>
</tbody>
</table>
</body>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)