Google Maps- Route Direction Information Between Source And Destination Using ASP.NET MVC And Bootstrap In Real-Time - Part Eleven

Introduction

Using directionsDisplay and directionsService in Google Maps helps us to show route direction information between the source and the destination.

Description


The Autocomplete widget is used to provide a type-ahead search box. It is operated using Google API Key, and the source and destination textboxes will show you places.

After putting source and destination, click on button. You will get the realtime duration and distance details with Map view and route direction information.

Before reading it, go through the parts -8, 9, and 10 of my Google Maps blog.

http://www.c-sharpcorner.com/members/satyaprakash-samantaray


Steps to be followed

Step1


As I described earlier,  create a Controller action method named "DistanceCalculation" in "HomeController.cs". 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace SatyaGoogleMapBootstrapMVC.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.         public ActionResult Details()  
  19.         {  
  20.             return View();  
  21.         }  
  22.         public ActionResult Animate()  
  23.         {  
  24.             return View();  
  25.         }  
  26.         public ActionResult Icon()  
  27.         {  
  28.             return View();  
  29.         }  
  30.         public ActionResult Steet()  
  31.         {  
  32.             return View();  
  33.         }  
  34.         public ActionResult ModeTravel()  
  35.         {  
  36.             return View();  
  37.         }  
  38.         public ActionResult Traffic()  
  39.         {  
  40.             return View();  
  41.         }  
  42.         public ActionResult RouteColor()  
  43.         {  
  44.             return View();  
  45.         }  
  46.         public ActionResult DistanceCalculation()  
  47.         {  
  48.             return View();  
  49.         }  
  50.     }  

Then, create a View named "DistanceCalculation.cshtml". 
  1. @{  
  2.     ViewBag.Title = "Satyaprakash Goolge Map With Distance Calculation";  
  3. }  
  4.   
  5. <title>@ViewBag.Title</title>  
  6.   
  7. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Goolge Map View With Distance And Duration Using MVC and BOOTSTRAP</h2>  
  8. <meta charset="utf-8">  
  9. <meta name="viewport" content="width=device-width, initial-scale=1">  
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  13.   
  14. <title>Places Searchbox</title>  
  15. <style>  
  16.     
  17.     #dvMap {  
  18.         height: 50%;  
  19.     }  
  20.   
  21.     .button {  
  22.         background-color: #4CAF50;  
  23.         border: none;  
  24.         color: white;  
  25.         padding: 15px 32px;  
  26.         text-align: center;  
  27.         text-decoration: none;  
  28.         display: inline-block;  
  29.         font-size: 16px;  
  30.         margin: 4px 2px;  
  31.         cursor: pointer;  
  32.     }  
  33.   
  34.     .button4 {  
  35.         border-radius: 9px;  
  36.     }  
  37.   
  38.     input[type=text], select {  
  39.         width: 40%;  
  40.         padding: 12px 20px;  
  41.         margin: 10px 0;  
  42.         display: inline-block;  
  43.         border: 1px solid #ccc;  
  44.         border-radius: 4px;  
  45.         box-sizing: border-box;  
  46.     }  
  47. </style>  
  48.   
  49.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&libraries=places">  
  50.     </script>  
  51.         <script type="text/javascript">  
  52.             var source, destination;  
  53.             var directionsDisplay;  
  54.             var directionsService = new google.maps.DirectionsService();  
  55.             google.maps.event.addDomListener(window, 'load'function () {  
  56.                 new google.maps.places.SearchBox(document.getElementById('txtSource'));  
  57.                 new google.maps.places.SearchBox(document.getElementById('txtDestination'));  
  58.                 directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable'true });  
  59.             });  
  60.   
  61.             function GetRoute() {  
  62.                 var mumbai = new google.maps.LatLng(18.9750, 72.8258);  
  63.                 var mapOptions = {  
  64.                     zoom: 7,  
  65.                     center: mumbai  
  66.                 };  
  67.                 map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);  
  68.                 directionsDisplay.setMap(map);  
  69.                 directionsDisplay.setPanel(document.getElementById('dvPanel'));  
  70.                  
  71.                 source = document.getElementById("txtSource").value;  
  72.                 destination = document.getElementById("txtDestination").value;  
  73.   
  74.                 var request = {  
  75.                     origin: source,  
  76.                     destination: destination,  
  77.                     travelMode: google.maps.TravelMode.DRIVING  
  78.                 };  
  79.                 directionsService.route(request, function (response, status) {  
  80.                     if (status == google.maps.DirectionsStatus.OK) {  
  81.                         directionsDisplay.setDirections(response);  
  82.                     }  
  83.                 });  
  84.   
  85.                  
  86.                 var service = new google.maps.DistanceMatrixService();  
  87.                 service.getDistanceMatrix({  
  88.                     origins: [source],  
  89.                     destinations: [destination],  
  90.                     travelMode: google.maps.TravelMode.DRIVING,  
  91.                     unitSystem: google.maps.UnitSystem.METRIC,  
  92.                     avoidHighways: false,  
  93.                     avoidTolls: false  
  94.                 }, function (response, status) {  
  95.                     if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {  
  96.                         var distance = response.rows[0].elements[0].distance.text;  
  97.                         var duration = response.rows[0].elements[0].duration.text;  
  98.                         var dvDistance = document.getElementById("dvDistance");  
  99.                         dvDistance.innerHTML = "";  
  100.                         dvDistance.innerHTML += "Distance Is: " + distance + "<br />";  
  101.                         dvDistance.innerHTML += "Duration Is:" + duration;  
  102.                         //alert(dvDistance.innerHTML);  
  103.                     } else {  
  104.                         alert("Your Request For Distance Not Available");  
  105.                     }  
  106.                 });  
  107.             }  
  108.         </script>  
  109.                                   
  110.                     <input type="text" id="txtSource" placeholder="Enter Source...." />  
  111.                        
  112.                     <input type="text" id="txtDestination" placeholder="Enter Destination...." />  
  113.                     <br />  
  114.                     <input type="button" value="Show" onclick="GetRoute()" class="button button4" />   
  115.                     <hr />  
  116.                     <div id="dvDistance" style="font-size:x-large; font-family: Arial Black; background-color: Yellow; color: Blue; text-align: center">  
  117.                     </div>     
  118.                     <div id="dvMap">  
  119.                     </div>  
  120.                     <div id="dvPanel">  
  121.                     </div>                                   
  122.                     <hr />  
  123.      
  124. <footer>  
  125.     <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@  
  126. </footer> 
 I have added a div id named "dvPanel".
  1. <div id="dvPanel">  
  2. </div>  
I have mentioned this id in directionsDisplay.setPanel function.
  1. directionsDisplay.setPanel(document.getElementById('dvPanel'));   
OUTPUT

Desktop View
 
 
 
Route Information 
 
 
 
Mobile View
 
 
 
Route Information

 
 
GIF image for better undertstanding
 
 
SUMMARY
  1. Google Maps route direction information between source and destination using Google API Key.
  2. How to implement in MVC and Bootstrap.
  3. Autocomplete widget link with textboxes.