Post
Ask Question

Google Maps - Route Style Between Multiple Places Using Bootstrap In ASP.NET MVC - Part Eight

Introduction

I changed the color of Google Route Map from the default color to Blue.

Description

Here, I have added two dropdowns where each dropdown contains multiple cities of the United States. Thus, we select cities, and accordingly, Google Route will be changed automatically with the specified color.

Steps

Create a Controller action method named RouteColor.
  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.     }  
  47. }   
Then, create a View named "RouteColor.cshtml".
  1. @{  
  2.     ViewBag.Title = "Satyaprakash Google Map Route Style";  
  3. }  
  4.   
  5. <title>@ViewBag.Title</title>  
  6.   
  7. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map Route Style Using MVC and BOOTSTRAP</h2>  
  8.   
  9.     <meta charset="utf-8">  
  10.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  12.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  14.   
  15. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&callback=initialize"></script>  
  16.   
  17.     <style>  
  18.         #map-canvas {  
  19.             height: 50%;  
  20.         }  
  21.  
  22.         #panel {  
  23.             top: 10px;  
  24.             left: 25%;  
  25.             z-index: 5;  
  26.             background-color: yellow;  
  27.             padding: 5px;  
  28.             border: 1px solid blue;  
  29.             text-align: center;  
  30.             font-family: 'Roboto','sans-serif';  
  31.             line-height: 30px;  
  32.             padding-left: 10px;  
  33.         }  
  34.          
  35.     </style>  
  36.   
  37.     <script>  
  38.         var directionsDisplay;  
  39.         var directionsService = new google.maps.DirectionsService();  
  40.         var map;  
  41.   
  42.         function initialize() {  
  43.             directionsDisplay = new google.maps.DirectionsRenderer({  
  44.                 polylineOptions: {  
  45.                     strokeColor: "blue"  
  46.                 }  
  47.             });  
  48.   
  49.             var mapOptions = {  
  50.                 zoom: 7,  
  51.                 mapTypeId: google.maps.MapTypeId.ROADMAP,  
  52.                 center: { lat: 41.850033, lng: -87.6500523 }  
  53.             }  
  54.             map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  
  55.             directionsDisplay.setMap(map);  
  56.         }  
  57.   
  58.         function calcRoute() {  
  59.             var start = document.getElementById('Source').value;  
  60.             var end = document.getElementById('Destination').value;  
  61.             var request = {  
  62.                 origin: start,  
  63.                 destination: end,  
  64.                 travelMode: google.maps.DirectionsTravelMode.DRIVING  
  65.             };  
  66.             directionsService.route(request, function (response, status) {  
  67.                 if (status == google.maps.DirectionsStatus.OK) {  
  68.                     directionsDisplay.setDirections(response);  
  69.                 }  
  70.             });  
  71.         }  
  72.   
  73.         google.maps.event.addDomListener(window, 'load', initialize);  
  74.     </script>  
  75.       
  76.         <div id="panel">  
  77.             <b>Source </b>  
  78.             <select id="Source" onchange="calcRoute();">  
  79.                 <option value="chicago, il">Chicago</option>  
  80.                 <option value="st louis, mo">St Louis</option>  
  81.                 <option value="joplin, mo">Joplin, MO</option>  
  82.                 <option value="oklahoma city, ok">Oklahoma City</option>  
  83.                 <option value="amarillo, tx">Amarillo</option>  
  84.                 <option value="gallup, nm">Gallup, NM</option>  
  85.                 <option value="flagstaff, az">Flagstaff, AZ</option>  
  86.                 <option value="winona, az">Winona</option>  
  87.                 <option value="kingman, az">Kingman</option>  
  88.                 <option value="barstow, ca">Barstow</option>  
  89.                 <option value="san bernardino, ca">San Bernardino</option>  
  90.                 <option value="los angeles, ca">Los Angeles</option>  
  91.             </select>  
  92.             <b>Destination </b>  
  93.             <select id="Destination" onchange="calcRoute();">  
  94.                 <option value="chicago, il">Chicago</option>  
  95.                 <option value="st louis, mo">St Louis</option>  
  96.                 <option value="joplin, mo">Joplin, MO</option>  
  97.                 <option value="oklahoma city, ok">Oklahoma City</option>  
  98.                 <option value="amarillo, tx">Amarillo</option>  
  99.                 <option value="gallup, nm">Gallup, NM</option>  
  100.                 <option value="flagstaff, az">Flagstaff, AZ</option>  
  101.                 <option value="winona, az">Winona</option>  
  102.                 <option value="kingman, az">Kingman</option>  
  103.                 <option value="barstow, ca">Barstow</option>  
  104.                 <option value="san bernardino, ca">San Bernardino</option>  
  105.                 <option value="los angeles, ca">Los Angeles</option>  
  106.             </select>  
  107.         </div>  
  108.         <div id="map-canvas"></div>  
  109. <footer>  
  110.     <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@  
  111. </footer> 
Here, I am using two dropdowns; one is Source and the other one is Destination. 
  1. <div id="panel">  
  2.             <b>Source </b>  
  3.             <select id="Source" onchange="calcRoute();">  
  4.                 <option value="chicago, il">Chicago</option>  
  5.                 <option value="st louis, mo">St Louis</option>  
  6.                 <option value="joplin, mo">Joplin, MO</option>  
  7.                 <option value="oklahoma city, ok">Oklahoma City</option>  
  8.                 <option value="amarillo, tx">Amarillo</option>  
  9.                 <option value="gallup, nm">Gallup, NM</option>  
  10.                 <option value="flagstaff, az">Flagstaff, AZ</option>  
  11.                 <option value="winona, az">Winona</option>  
  12.                 <option value="kingman, az">Kingman</option>  
  13.                 <option value="barstow, ca">Barstow</option>  
  14.                 <option value="san bernardino, ca">San Bernardino</option>  
  15.                 <option value="los angeles, ca">Los Angeles</option>  
  16.             </select>  
  17.             <b>Destination </b>  
  18.             <select id="Destination" onchange="calcRoute();">  
  19.                 <option value="chicago, il">Chicago</option>  
  20.                 <option value="st louis, mo">St Louis</option>  
  21.                 <option value="joplin, mo">Joplin, MO</option>  
  22.                 <option value="oklahoma city, ok">Oklahoma City</option>  
  23.                 <option value="amarillo, tx">Amarillo</option>  
  24.                 <option value="gallup, nm">Gallup, NM</option>  
  25.                 <option value="flagstaff, az">Flagstaff, AZ</option>  
  26.                 <option value="winona, az">Winona</option>  
  27.                 <option value="kingman, az">Kingman</option>  
  28.                 <option value="barstow, ca">Barstow</option>  
  29.                 <option value="san bernardino, ca">San Bernardino</option>  
  30.                 <option value="los angeles, ca">Los Angeles</option>  
  31.             </select>  
  32.         </div>   
To show the route between source and destination, proceed as given below.
  1. function calcRoute() {  
  2.             var start = document.getElementById('Source').value;  
  3.             var end = document.getElementById('Destination').value;  
  4.             var request = {  
  5.                 origin: start,  
  6.                 destination: end,  
  7.                 travelMode: google.maps.DirectionsTravelMode.DRIVING  
  8.             };  
  9.             directionsService.route(request, function (response, status) {  
  10.                 if (status == google.maps.DirectionsStatus.OK) {  
  11.                     directionsDisplay.setDirections(response);  
  12.                 }  
  13.             });  
  14.         }  
  15.   
  16.         google.maps.event.addDomListener(window, 'load', initialize); 
Here, I have specified the color of the route manually instead of default color by Google.
  1. function initialize() {  
  2.             directionsDisplay = new google.maps.DirectionsRenderer({  
  3.                 polylineOptions: {  
  4.                     strokeColor: "blue"  
  5.                 }  
  6.             });   
At the first time, Chicago city will be shown as I specified the coordinates in the code.
  1. var directionsDisplay;  
  2.         var directionsService = new google.maps.DirectionsService();  
  3.         var map;  
  4.   
  5.         function initialize() {  
  6.             directionsDisplay = new google.maps.DirectionsRenderer({  
  7.                 polylineOptions: {  
  8.                     strokeColor: "blue"  
  9.                 }  
  10.             });  
  11.   
  12.             var mapOptions = {  
  13.                 zoom: 7,  
  14.                 mapTypeId: google.maps.MapTypeId.ROADMAP,  
  15.                 center: { lat: 41.850033, lng: -87.6500523 }  
  16.             }  
  17.             map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  
  18.             directionsDisplay.setMap(map);  
  19.         } 
I have mentioned the function name in Google API key link, i.e. initialize.
  1. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&callback=initialize"></script> 
Output

Desktop view

FIrst Time 
 
 
Two dropdowns binding.
 
 
 
 
Show route with the specified color.
 
 
 
Mobile view
 
 
 
 
 
GIF image for better understanding
 
Desktop view
 

 
 
Mobile view
 
 
 
Summary
  1. What is Google Maps Route.
  2. How to change its color style.
  3. Show route between the multiple places.
  4. Multi-Platform support.
Next Recommended Reading Google Map Using Bootstrap In ASP.NET MVC - Part One