Google Maps - Traffic Signal Between Source And Destination Using Bootstrap And ASP.NET MVC

Introduction

Google Maps JavaScript API allows you to add real-time traffic information (wherever supported) to your map using the TrafficLayer object. Traffic information is refreshed frequently but not instantly. Rapid consecutive requests for the same area are unlikely to yield different results.

Google Maps API allows you to display map on your ASP.NET MVC Website.

This real time example can be implemented in an online transportation network company like Ola or Uber.

Description

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

Travel modes

When you calculate the directions, you need to specify which transportation mode to use. The travel modes given below are currently supported.

1. Driving - (Default) indicates standard driving directions, using the road network.
2. Bicycling - It requests the bicycling directions via bicycle paths & the preferred streets.
3. Transit - It requests the directions via public transit routes.
4. Walking - It requests the walking directions via pedestrian paths & sidewalks.

Consult Google Maps coverage data to determine to what extent a country supports the directions. If you request the directions for a region in which the particular 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 the warnings in the DirectionsResult, which you must display, if you are not using the default DirectionsRenderer.

An API is a set of methods and tools, which can be used to build the software Applications.

As defined by Google Places API, a place can be an establishment, a geographic location or a prominent point of an interest.

For better reference

For more details, visit my blogs and articles related to Google Maps.

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

Steps to be followed are given below.

Step 1

Create a Controller action method named Traffic in 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 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();
        }
    }
}

 Code description

Here, the Traffic Controller action method is used for to create view, which will show how to use traffic signal between the two places.

public ActionResult Traffic()
        {
            return View();
        }

Step2

Create a View named Traffic.cshtml.

Code Ref

@{
    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: yellow;
        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({ polylineOptions: { strokeColor: "#FFFF38" } });
        var directionsService = new google.maps.DirectionsService;
        directionsDisplay.setOptions({ suppressMarkers: false });
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: { lat: 12.9081, lng: 77.6476 }
        });

        directionsDisplay.setMap(map);

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.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.9165, lng: 77.6220 },  // Silkboard.
            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>

Code Description

I have added a dropdown with the modes of travelling.

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

Driving- (Default) indicates standard driving directions using the road network.
Bicycling- It requests the bicycling directions via bicycle paths & the preferred streets.
Transit-  It requests the directions via public transit routes.
Walking- It requests the walking directions via pedestrian paths & sidewalks.

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

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

var directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#FFFF38" } });
var directionsService = new google.maps.DirectionsService;

Here, I am going to change the route color manually.

var directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#FFFF38" } });

By default, it was blue in Google Maps. I have made it yellow.

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 called a function to calculate and show the routes.

calculateAndDisplayRoute(directionsService, directionsDisplay);

Proceed, as shown below.

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

I defined and built the function here.

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
            origin: { lat: 12.9165, lng: 77.6220 },  // Silkboard.
            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);
            }

        });
    }

Here, with selection mode of travelling, the source and destination route will come with my specified color and along with the traffic Red mark symbol, which will come between the source and the destination.

var selectedMode = document.getElementById('mode').value;
directionsService.route({
    origin: { lat: 12.9165, lng: 77.6220 },  // Silkboard.
    destination: { lat: 12.9592, lng: 77.6974 },  // marathahalli.


    travelMode: google.maps.TravelMode[selectedMode]

}

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

travelMode: google.maps.TravelMode[selectedMode]

If any mode of option is not available between the places, the mentioned steps given below will be executed.

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

This message will come with Zero Result status.

window.alert('Directions Query Unavailable Due To ' + status);

I have added the code to show about the traffic signal with Red mark symbol.

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Output

URL - http://localhost:57237/Home/Traffic

Desktop view

Source and Destination Information Window

Route color with traffic signal Red mark

Mobile view

GIF Images For Better understanding about traffic signal

Desktop view

Mobile view

What the colors and symbols mean on the legend

Traffic colors

The color code shows you the speed of the traffic on the road.

• Green- No traffic delays.
• Orange- Medium amount of traffic.
• Red- Traffic delays. The darker the Red, the slower the speed of the traffic on the road.

Note

Gray or Blue lines on the map show your routes.

Traffic incident symbols

Traffic incidents include types of delays given below.

To see the details about what happened, click or tap the icon.

Note- For road closures, you will see a dotted Red line where the road is closed.

Public transit

The lines on the map show bus, subway and rail routes. To see more information and upcoming trains or buses, choose a station stop icon . To see station stops, look for transit icons like

NOTE

For Bicycling mode,The Central Silk board and Marathahalli route not found in Google Server.

For Transit mode, you can get the buses, which are available with bus no. and other details for The Central Silk board and Marathahalli route.

The traffic signal with the route is clearly visible with customized route color.

Summary

1. What is a Google Map?
2. Traffic Ssgnal with travelling mode.
3. How to implement in MVC and Bootstrap.
4. Get latest update of a traffic signal between the source and the destination.
5. Here you can get the traffic signal with the various travelling modes.