Post
Ask Question

Google Map Animated Markers With Different Color For Different Places Using MVC And Bootstrap - Part Twelve

Introduction

I can show you how the colored markers for differenet types of places like Hospitals, temples, Parks, etc.
using specific Colored Markers for each type of location.

Description

By using this concept people can easily get the information about types of places like Hospitals, temples, Parks, etc. With specified marker color the places can be easily known to the user.
 
In a state how many companies , banks , temples and mba colleges we can specify by implementing this concept.

To Know more details about google map , Go through my blogs.
  • http://www.c-sharpcorner.com/members/satyaprakash-samantaray
Before go to this blog , Just read my previous blogs and articles based on Google Map.

Steps to be follwed

Step1

Create a controller action method named "MarkerPart()" in "HomeController.cs" controller .
  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.         public ActionResult MarkerPart()  
  13.         {  
  14.             return View();  
  15.         }  
  16.     }  
  17. }   
Step2

Create a view named "MarkerPart.cshtml".
  1. @{  
  2.     ViewBag.Title = "Satyaprakash Goolge Map Marker Nofifier";  
  3. }  
  4.   
  5. <title>@ViewBag.Title</title>  
  6.   
  7. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Goolge Map Marker Nofifier Using MVC and BOOTSTRAP</h2>  
  8. <meta charset="utf-8">  
  9. <meta name="viewport" content="width=device-width, initial-scale=1">  
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  13.   
  14.   
  15. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
  16.   
  17. <style>  
  18.     #dvMap {  
  19.         height: 50%;  
  20.     }  
  21.       
  22. </style>  
  23.   
  24.   
  25.   
  26. <script type="text/javascript">  
  27.     var markers = [  
  28.         {  
  29.             "title": 'Sum Hospital Bhubaneswar',  
  30.             "lat": '20.2818706',  
  31.             "lng": '85.7674336',  
  32.             "description": 'Sum Hospital Bhubaneswar',  
  33.             "type": 'Hospital'  
  34.         },  
  35.             {  
  36.                 "title": 'Puri Jagannath Temple',  
  37.                 "lat": '19.8047818',  
  38.                 "lng": '85.81824589999997',  
  39.                 "description": 'Puri Jagannath Temple',  
  40.                 "type": 'Temple'  
  41.             },  
  42.         {  
  43.             "title": 'Big Bazaar Satya Nagar Bhubaneswar',  
  44.             "lat": '20.27834039999999',  
  45.             "lng": '85.84536690000004',  
  46.             "description": 'Big Bazaar Satya Nagar Bhubaneswar',  
  47.             "type": 'Mall'  
  48.         },  
  49.             {  
  50.                 "title": 'Infosys Patia Bhubaneswar',  
  51.                 "lat": '20.3415279',  
  52.                 "lng": '85.80446619999998',  
  53.                 "description": 'Infosys Patia Bhubaneswar',  
  54.                 "type": 'Company'  
  55.             }  
  56.              
  57.                   
  58.                   
  59.     ];  
  60.     window.onload = function () {  
  61.   
  62.         var mapOptions = {  
  63.             center: new google.maps.LatLng(markers[1].lat, markers[1].lng),  
  64.             zoom: 14,  
  65.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  66.         };  
  67.         var infoWindow = new google.maps.InfoWindow();  
  68.         var latlngbounds = new google.maps.LatLngBounds();  
  69.         var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);  
  70.         var i = 0;  
  71.         var interval = setInterval(function () {  
  72.             var data = markers[i]  
  73.             var myLatlng = new google.maps.LatLng(data.lat, data.lng);  
  74.             var icon = "";  
  75.             switch (data.type) {  
  76.                 case "Temple":  
  77.                     icon = "red";  
  78.                     break;  
  79.                 case "Hospital":  
  80.                     icon = "blue";  
  81.                     break;  
  82.                 case "Mall":  
  83.                     icon = "yellow";  
  84.                     break;  
  85.                 case "Company":  
  86.                     icon = "green";  
  87.                     break;  
  88.             }  
  89.             icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";  
  90.             var marker = new google.maps.Marker({  
  91.                 position: myLatlng,  
  92.                 map: map,  
  93.                 title: data.title,  
  94.                 animation: google.maps.Animation.BOUNCE,  
  95.                 icon: new google.maps.MarkerImage(icon)  
  96.             });  
  97.             (function (marker, data) {  
  98.                 google.maps.event.addListener(marker, "click", function (e) {  
  99.                     infoWindow.setContent(data.description);  
  100.                     infoWindow.open(map, marker);  
  101.                 });  
  102.             })(marker, data);  
  103.             latlngbounds.extend(marker.position);  
  104.             i++;  
  105.             if (i == markers.length) {  
  106.                 clearInterval(interval);  
  107.                 var bounds = new google.maps.LatLngBounds();  
  108.                 map.setCenter(latlngbounds.getCenter());  
  109.                 map.fitBounds(latlngbounds);  
  110.             }  
  111.         }, 80);  
  112.     }  
  113. </script>  
  114.   
  115.             <div id="dvMap">  
  116.             </div>  
  117.       
  118. <div id="Marker Notification" style="font-size: x-large; font-family: Arial Black; background-color:pink; color:blue; text-align: center">  
  119.   
  120.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />  
  121.     Temple    
  122.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/blue.png" />  
  123.     Hospital   @*<br/>*@  
  124.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />  
  125.     Mall    
  126.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/green.png" />  
  127.     Company  
  128.   
  129. </div>  
  130.   
  131. <br/>  
  132.   
  133. <footer>  
  134.     <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@  
  135. </footer> 
Here i assigned all places's marker details and coordinates and types. 
  1. var markers = [  
  2.         {  
  3.             "title": 'Sum Hospital Bhubaneswar',  
  4.             "lat": '20.2818706',  
  5.             "lng": '85.7674336',  
  6.             "description": 'Sum Hospital Bhubaneswar',  
  7.             "type": 'Hospital'  
  8.         },  
  9.             {  
  10.                 "title": 'Puri Jagannath Temple',  
  11.                 "lat": '19.8047818',  
  12.                 "lng": '85.81824589999997',  
  13.                 "description": 'Puri Jagannath Temple',  
  14.                 "type": 'Temple'  
  15.             },  
  16.         {  
  17.             "title": 'Big Bazaar Satya Nagar Bhubaneswar',  
  18.             "lat": '20.27834039999999',  
  19.             "lng": '85.84536690000004',  
  20.             "description": 'Big Bazaar Satya Nagar Bhubaneswar',  
  21.             "type": 'Mall'  
  22.         },  
  23.             {  
  24.                 "title": 'Infosys Patia Bhubaneswar',  
  25.                 "lat": '20.3415279',  
  26.                 "lng": '85.80446619999998',  
  27.                 "description": 'Infosys Patia Bhubaneswar',  
  28.                 "type": 'Company'  
  29.             }  
  30.              
  31.                   
  32.                   
  33.     ]; 
 On first time load the map properties mentioned.
  1. var mapOptions = {  
  2.             center: new google.maps.LatLng(markers[1].lat, markers[1].lng),  
  3.             zoom: 14,  
  4.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  5.         }; 
 I added marker properties here.
  1. var marker = new google.maps.Marker({  
  2.                 position: myLatlng,  
  3.                 map: map,  
  4.                 title: data.title,  
  5.                 animation: google.maps.Animation.BOUNCE,  
  6.                 icon: new google.maps.MarkerImage(icon)  
  7.             }); 
 I added the description with infowindow.
  1. (function (marker, data) {  
  2.                 google.maps.event.addListener(marker, "click", function (e) {  
  3.                     infoWindow.setContent(data.description);  
  4.                     infoWindow.open(map, marker);  
  5.                 });  
  6.             })(marker, data); 
 i added here div id relate with google map.
  1. var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);  
  2.  <div id="dvMap">  
  3.  </div> 
 Then i have added legends to identity type of places.
  1. <div id="Marker Notification" style="font-size: x-large; font-family: Arial Black; background-color:pink; color:blue; text-align: center">  
  2.   
  3.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />  
  4.     Temple    
  5.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/blue.png" />  
  6.     Hospital   @*<br/>*@  
  7.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />  
  8.     Mall    
  9.     <img alt="" src="http://maps.google.com/mapfiles/ms/icons/green.png" />  
  10.     Company  
  11.   
  12. </div> 
 I set the animated bounce marker with colors and png image format.
  1. var icon = "";  
  2.             switch (data.type) {  
  3.                 case "Temple":  
  4.                     icon = "red";  
  5.                     break;  
  6.                 case "Hospital":  
  7.                     icon = "blue";  
  8.                     break;  
  9.                 case "Mall":  
  10.                     icon = "yellow";  
  11.                     break;  
  12.                 case "Company":  
  13.                     icon = "green";  
  14.                     break;  
  15.             }  
  16.             icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png"; 
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
  1. var interval = setInterval(function () 
I have an HTML DIV which I am making use as a container control to populate Google Maps. I have a predefined array of markers of different locations such as Hospitals,temples , Malls and companies that I need to populate on the Google Maps using different colored markers.

Under the Maps I have displayed legend which describes that a particular color resembles which type of location. Example, Red color Marker displays Temple in the City.

OUTPUT

Dektop View
 
 
 
The Markers on places with legends below the map to identify the type of the place.



The description of 4 plcaes in a city.

For Temple
 


For Hospital
 


For Mall
 


For Company
 


Mobile View
 



Gif Images For Better Understanding,
 




Summary
  1. Identify type of the places using marker colors in google map.
  2. legends for markers useful.
  3. How to implement in mvc and bootstrap.
  4. In a city Bhubaneswar i specified the deifferent places with different marker colors.
Next Recommended Reading Google Map Using Bootstrap In ASP.NET MVC - Part One