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

Using the directionsDisplay and directionsService in Google Map helps us to show Route Direction Information between source and destination.

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". 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SatyaGoogleMapBootstrapMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Details()
        {
            return View();
        }
        public ActionResult Animate()
        {
            return View();
        }
        public ActionResult Icon()
        {
            return View();
        }
        public ActionResult Steet()
        {
            return View();
        }
        public ActionResult ModeTravel()
        {
            return View();
        }
        public ActionResult Traffic()
        {
            return View();
        }
        public ActionResult RouteColor()
        {
            return View();
        }
        public ActionResult DistanceCalculation()
        {
            return View();
        }
    }
}

Then, create a View named "DistanceCalculation.cshtml". 

@{
    ViewBag.Title = "Satyaprakash Goolge Map With Distance Calculation";
}

<title>@ViewBag.Title</title>

<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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<title>Places Searchbox</title>
<style>

    #dvMap {
        height: 50%;
    }

    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .button4 {
        border-radius: 9px;
    }

    input[type=text], select {
        width: 40%;
        padding: 12px 20px;
        margin: 10px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
</style>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&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'));

                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);
                    }
                });


                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 Is: " + distance + "<br />";
                        dvDistance.innerHTML += "Duration Is:" + duration;
                        //alert(dvDistance.innerHTML);
                    } else {
                        alert("Your Request For Distance Not Available");
                    }
                });
            }
        </script>

                    <input type="text" id="txtSource" placeholder="Enter Source...." />

                    <input type="text" id="txtDestination" placeholder="Enter Destination...." />
                    <br />
                    <input type="button" value="Show" onclick="GetRoute()" class="button button4" />
                    <hr />
                    <div id="dvDistance" style="font-size:x-large; font-family: Arial Black; background-color: Yellow; color: Blue; text-align: center">
                    </div>
                    <div id="dvMap">
                    </div>
                    <div id="dvPanel">
                    </div>
                    <hr />

<footer>
    <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

 I have added a div id named "dvPanel".

<div id="dvPanel">
</div>

I have mentioned this id in directionsDisplay.setPanel function.

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.