Google Maps - Using ASP.NET MVC And Bootstrap In Real Time Scenario With All-In-One Features And Multiplatform Support

Introduction

The directionsService in Google Maps helps us to calculate the distance between the source and the destination. It is the duration it will take to travel and directionsDisplay in Google Maps helps us to show the route between the places.

 

Description

Autocomplete widget is required to provide a type-ahead search box. It is operated by using Google API key. The source and destination textbox will show you the places.

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

For more details, refer

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

 

Steps to be followed are given below.

 

Step 1

 

Create a MVC Application named SatyaGoogleMapBootstrapMVC.

 

 

Step 2

 

Create a Controller class file named HomeController.cs.

 

Code Ref

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 DistanceCalculation()
        {
            return View();
        }
    }
}

Code description

 

Here, the controller action menthod is DistanceCalculation().

 

Step 3

 

Create a View named DistanceCalculation.cshtml.

 

Code Ref

@{
    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;

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

Code description

 

To get the directions and route, proceed, as shown below. 

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

To get the distance and duration calculations, proceed, as show below.

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

The first time.

var mumbai = new google.maps.LatLng(18.9750, 72.8258);
                var mapOptions = {
                    zoom: 7,
                    center: mumbai

I created one function and proceeded, as shown below.

function GetRoute() {

}

Now, I added source and destination textboxes.

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

 <input type="text" id="txtDestination" placeholder="Enter Destination...." />

I added a button control with the mentioned function name GetRoute() in onclick event.

<input type="button" value="Show" onclick="GetRoute()" class="button button4" />
                    <hr />

Now, I added div tag named dvDistance to show the distance and the duration calculation between the places.

<div id="dvDistance" style="font-size:x-large; font-family: Arial Black; background-color: Yellow; color: Blue; text-align: center">
                    </div>

The condition, which I put for the valid message is the source and the destination successfully exists, else it exbhibits it through a warning message.

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

For warning part, it exhibits, as shown below.

else {
                        alert("Your Request For Distance Not Available");
                    }

I have added a div tag for the map.

<div id="dvMap">
 </div>

Subsequently, I passed the div id dvMap.

map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
directionsDisplay.setMap(map);

Always set the map height explicitly to define the size of the div element, which contains the map.

#dvMap {
        height: 50%;
    }

I have added a div id named dvPanel.

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

I mentioned this id in directionsDisplay.setPanel function.

directionsDisplay.setPanel(document.getElementById('dvPanel'));

HTML Markup consists of two TextBoxes, where first one is for entering the source address while the other for entering the destination address, a Button and three HTML DIVs to display the distance and duration details, plotting map and displaying the directions.

 

Inside Google Maps Window, load event handler, for the source and the destination TextBoxes, I have implemented Google Places Autocomplete TextBox. When the button is clicked, first the Map and the Directions Service is initialized to display the map and the directions in their respective HTML DIVs.

Then using the source and destination addresses from the respective TextBoxes, the details of the directions, route, distance and duration are displayed inside the respective HTML DIVs.

 

 

 

Step 4

 

Set start page.

 

Code Ref

routes.MapRoute(
               name: "Default",
               url: "{controller}/{action}/{id}",
               defaults: new { controller = "Home", action = "DistanceCalculation", id = UrlParameter.Optional }
           );

Code description

 

Here, the Controller name is Home and Controller action method name is DistanceCalculation.

 

 

 

Output

Desktop View

 

 

 

Route Information Part is given below

 

 

 

Mobile View

 

 

 

Route information part is given below.

 

 

 

GIF image for better undertstanding is given below. 

 

 

 

Extra GIF image shows the individual parts of this Application for better undertstanding.

 

Part 1

 

 

 

Part 2

 

 

 

Part 3

 

 

 

Summary

1. Google Maps route direction information between the source and the destination, using Google API key.
2. How to implement in MVC and Bootstrap.
3. Autocomplete widget link with the textboxes.
4. Google API key link URL. 
5. Set the message for an invalid source and the destination selection.
6. Multiple patform view support in Google Maps app.