Google Maps Travelling Mode Using Bootstrap In ASP.NET MVC - PART Seven

Use of the DirectionsService object to fetch directions for different travel modes.

Introduction

The use of the DirectionsService object is to fetch the directions for different travel modes.

Travel Modes

When you calculate directions, you need to specify which transportation mode you are willing to use. The following travel modes are currently available.

1. DRIVING - (Default) indicates standard driving directions using the road network.
2. BICYCLING - requests bicycling directions via bicycle paths & preferred streets.
3. TRANSIT  - requests directions via public transit routes.
4. WALKING - requests walking directions via pedestrian paths & sidewalks.

Consult the Google Maps coverage data to determine, to what extent a country supports directions. If you request directions for a region in which that direction type is not available, the response will return the DirectionsStatus="ZERO_RESULTS".

Walking directions may not include clear pedestrian paths, so walking directions will return warnings in the DirectionsResult which you must display if you are not using the default DirectionsRenderer.

Steps

Before you go through this blog, please go through my Google Maps related blogs from PART-1 to PART-6.

 

Now, let's continue.

 

First, create a Controller action method named "ModeTravel" 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();
        }
    }
}

Create a View named "ModeTravel.cshtml".

@{
    ViewBag.Title = "Satyaprakash Google Map Travelling Mode";
}

<title>@ViewBag.Title</title>

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map Travelling Mode 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>

   <style>

    #map {
        height: 50%;
    }

    #Dropdown {
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color:orange;
        padding: 5px;
        border: 1px solid blue;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
    }
</style>
    <div id="Dropdown">
    <b style="color:blue">Mode Of Visting: </b>
    <select id="mode">
        <option value="DRIVING">By Driving</option>
        <option value="WALKING">By Walking</option>
        <option value="BICYCLING">By Bicycling</option>
        <option value="TRANSIT">Transit Or Bus Availability</option>
    </select>
</div>
    <div id="map"></div>
    <script>
        function initMap() {
            var directionsDisplay = new google.maps.DirectionsRenderer;
            var directionsService = new google.maps.DirectionsService;
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 11,
                center: { lat: 12.9081, lng: 77.6476 }
            });

            directionsDisplay.setMap(map);

            calculateAndDisplayRoute(directionsService, directionsDisplay);
            document.getElementById('mode').addEventListener('change', function () {
                calculateAndDisplayRoute(directionsService, directionsDisplay);
            });
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
            var selectedMode = document.getElementById('mode').value;
            directionsService.route({
                origin: { lat: 12.9081, lng: 77.6476 },  // Hsr Layout.
                destination: { lat: 12.9592, lng: 77.6974 },  // marathahalli.

                travelMode: google.maps.TravelMode[selectedMode]

            }, function (response, status) {
                if (status == 'OK') {
                    directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions Query Unavailable Due To ' + status);
                }

            });
        }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&callback=initMap"></script>

    <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 added a dropdown with modes of travelling ...

<select id="mode">
        <option value="DRIVING">By Driving</option>
        <option value="WALKING">By Walking</option>
        <option value="BICYCLING">By Bicycling</option>
        <option value="TRANSIT">Transit Or Bus Availability</option>
    </select>

 You can calculate the directions (using a variety of methods of transportation) by using the DirectionsService object. This object communicates with the Google Maps API Directions Service which receives direction request and returns an efficient path.

You may either handle these direction results yourself or use the DirectionsRenderer object to render the same.

var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;

The Directions Service can return multi-part directions using a series of waypoints. Directions are displayed as a polyline drawing the route on a map, or additionally as a series of textual description within a <div> element.

Here, I have called a function to calculate and show the routes.

calculateAndDisplayRoute(directionsService, directionsDisplay);

Then, after selecting any one option in dropdown, the function will work.

document.getElementById('mode').addEventListener('change', function () {
                calculateAndDisplayRoute(directionsService, directionsDisplay);
            });

I have defined and built the function here.

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
            var selectedMode = document.getElementById('mode').value;
            directionsService.route({
                origin: { lat: 12.9081, lng: 77.6476 },  // For Hsr Layout.
                destination: { lat: 12.9592, lng: 77.6974 },  // For marathahalli.


                travelMode: google.maps.TravelMode[selectedMode]

            }, function (response, status) {
                if (status == 'OK') {
                    directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions Query Unavailable Due To ' + status);
                }

            });
        }

Note that JavaScript allows us to access the constant using square brackets and a string value as its "property".

travelMode: google.maps.TravelMode[selectedMode]

Then, if any mode of option is not available between the places , then the below mentioned steps will be executed.

function (response, status) {
                if (status == 'OK') {
                    directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions Query Unavailable Due To ' + status);
                }

OUTPUT

Desktop View

 

 

 

 

Mobile View

 

 

 

 

NOTE

For BICYCLING mode,the HSR Layout and Marathahalli route are not found on Google Server.

For TRANSIT mode , you can get the details of available buses with bus no. and other infromation.

Summary

Today, we learned the following.

1. What Google Maps Travelling Mode is.
2. How to implement it in MVC and Bootstrap.
3. Mode of travelling for some places are not fed to Google Server.