Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  ASP.NET

How to Calculate Distance in Asp.Net MVC with Google Maps

  johnmorgan      2017-03-10 06:29:23      3,275    0

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, 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>   
        <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 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()" />   
<div id="dvDistance">   
<table id="tblResults" border="1" cellpadding="10"⺠  
<th> Start </th>   
<th> End </th>   
<th> Distance </th>   
<th> Duration </th>  
<div id="dvMap" style="min-height:500px"></div>  
We have added ‘locations’ array in the code.
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 });  
The array of destination locations is handled by the ‘PushDestination()’ method. It also updates the screen with new item to the div ‘destinations’.
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;   
The GetRoute() method gets you the route
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  
At the end, we send in the request and resolve the waypoints results.
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";  
  else {  
            //handle error  
You can try this project and share your experience with us and other readers. All these sample code will help you in calculating the distance in mvc using Google Maps. Hire any reliable mvc development company and let its team to do this job. If yu have prior development experience, you can try coding and share the final results at the end. Do tell us if we have skipped any important information.


Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr 



No comment for this article.


After updating the firewall rule

By sonic0002
Source : Sina Webo user 工程师日常