Internet users are vastly dependent on both Google and Bing mapping tools. The API available for developers provides them an ability to add value to the solutions developed by them.There is no such requirement of using everything. There are times when only a snippet can make a big difference to the app users. In this article, asp.net development experts will explain how to use Google Maps APIs and help office staff to calculate distance.
When a team is travelling for the job, they either ride on commercial transport delivery vehicles or normal cabs. For instance – cleaning agents- sure they have prepared their day plan for the job. This is a casual story in a small town. However, in bigger cities and a busy service company, there can be several calls for emergencies during the day that need to be prioritized and transport routes correctly.
Experts may use one of the methods to decide where to send the team by working on following questions-
1. How urgent is the task?
2. What is the location? Is it close to one of our mobile staff?
3. What’s the earliest one of our mobile staff can get from present location, to the requested one?
This thing can get extremely complex in no time. However, if you combine distinct technologies like GPS/Geo location on the smartphones to monitor the present location of remote workers, you can put some practical solutions together for mobile users.
There is a code that lets the user to feed the current location of a remote worker and a list of distinct ‘emergency call out’ locations. With the help of Google Maps, you can display the distance from location and the journey time to the user. This will give them an idea about what call-out job to prioritize with what remote worker.
Distance and route between several points
To empower user with more flexibility and allow them to plan and travel, we need to see how we can use the ‘waypoint’ API in the Maps to calculate the distance between several points and provide map view to the user.
1. Set up the UI to allow user to put a series of possible destinations.
We have added few things in our HTML layout-
Array of possible destinations in JS are there for which we have applied ‘PushDestination()’ method to allow user to add destinations.
Test the locations faster with ‘setDestination()’ method.
The ‘destinations’ div stores destinations list prior any calculation.
A table displays the results from the API in well formatted way.
<div> Add Destination</div>
<div>
<input id="travelto" type="text" name="name" value="Oving, UK" I>
<input type="button" value="Add" onclick="PushDestination()" I>
<a href=":" onclick="setDestination('Tagmere, UK')">Tagmere, UK. </a>
<a href="*" onclick="setDestination(Tosham, UK')">Bosham, UK</a>
</div>
<div id="destinations"></div><br I>
Source : <input id="travelfrom" type="text" name="name" value="Chichester, UK" /> </p><p> <input type="button" value="Calculate" onclick="GetRoute()" />
<p></p>
<br/>
<div id="dvDistance">
<table id="tblResults" border="1" cellpadding="10"âº
<tr>
<th> Start </th>
<th> End </th>
<th> Distance </th>
<th> Duration </th>
</tr>
</table>
</div>
<div id="dvMap" style="min-height:500px"></div>
var source, destination;
var locations = [];
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();</p><p>// initialise the location of the map on Chichester in England (ref lat and lng)
var map = new google.maps.Map(document.getElementByld('dvMap'), {
center: { lat: 50.834697, lng: -0.773792 },
zoom: 13,
mapTypeId: 'roadmap'
});</p><p>google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElement8yId('travelfroW));
new google.maps.places.SearchBox(document.getElement8yId('travelto'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
function PushDestination() {
destination = document.getElementById("travelto").value; locations.push(destination);
document.getElementElyId("travelto").value = "";
destinationArray = document.getElementById("destinations"); destinationArray.innerHTML += destination + "<br />";
}
Method of My Helper adds the items to the input box and uses the PushDestination() method for keeping the things moving side by side.
function setDestination(dest)
{
document.getElementbyId('Itravelto').value = dest;
PushDestination();
}</p><p>
function GetRoute()
directionsDisplay. setMap(map);
source = document.getElementById("travelfrom").value;
destination = document.getElementById("travelto").value; </p><p>The code for adding array of waypoints-
var waypoints = [];
for (var i = 0; i < locations.length; i++) {
var address = locations[i];
if (address !== "") {
waypoints.push({ location: address,
stopover: true
});
}
}
To tell the API to optimize for the waypoints, we add an array of waypoints-
var request = {
origin: source,
destination: waypoints[0].location,
waypoints: waypoints, //an array of waypoints
optimizeWaypoints: true, //set to true if you want google to determine the
// shortest route or false to use the order specified. travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var dvDistance = document.getElementByld("dvDistance");
var distance = 0;
var minute = 0.00;
response.routes[0].legs.forEach(function (item, index) {
if (index < response.routes[0].legs.length - 1) {
distancedistance = distance + parselnt(item.distance.text);
minute = parseFloat(minute) + parseFloat(item.duration.value / 60);
tbl = document.getElementByld("tblResults");
var row = tbl.insertRow(1);
var cell = row.insertCell(0);
cell.innerText = source;
var cell = row.insertCell(1);
cell.innerText = item.end_address;
var cell = row.insertCell(2);
cell.innerText = distance;
var cell = row.insertCell(3);
cell.innerText = minute.toFixed(2) + " min";
}
});
directionsDisplay.setDirections(response);
}
else {
//handle error
}
})
