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

Blog

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 .

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaGoogleMapBootstrapMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult MarkerPart()
{
return View();
}
}
}

Step2

Create a view named "MarkerPart.cshtml".

@{
ViewBag.Title = "Satyaprakash Goolge Map Marker Nofifier";
}
<title>@ViewBag.Title</title>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Goolge Map Marker Nofifier 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>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#dvMap {
height: 50%;
}
</style>
<script type="text/javascript">
var markers = [
{
"title": 'Sum Hospital Bhubaneswar',
"lat": '20.2818706',
"lng": '85.7674336',
"description": 'Sum Hospital Bhubaneswar',
"type": 'Hospital'
},
{
"title": 'Puri Jagannath Temple',
"lat": '19.8047818',
"lng": '85.81824589999997',
"description": 'Puri Jagannath Temple',
"type": 'Temple'
},
{
"title": 'Big Bazaar Satya Nagar Bhubaneswar',
"lat": '20.27834039999999',
"lng": '85.84536690000004',
"description": 'Big Bazaar Satya Nagar Bhubaneswar',
"type": 'Mall'
},
{
"title": 'Infosys Patia Bhubaneswar',
"lat": '20.3415279',
"lng": '85.80446619999998',
"description": 'Infosys Patia Bhubaneswar',
"type": 'Company'
}
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[1].lat, markers[1].lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "Temple":
icon = "red";
break;
case "Hospital":
icon = "blue";
break;
case "Mall":
icon = "yellow";
break;
case "Company":
icon = "green";
break;
}
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.BOUNCE,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<div id="dvMap">
</div>
<div id="Marker Notification" style="font-size: x-large; font-family: Arial Black; background-color:pink; color:blue; text-align: center">
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />
Temple
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/blue.png" />
Hospital @*<br/>*@
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />
Mall
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/green.png" />
Company
</div>
<br/>
<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>

Here i assigned all places's marker details and coordinates and types.

var markers = [
{
"title": 'Sum Hospital Bhubaneswar',
"lat": '20.2818706',
"lng": '85.7674336',
"description": 'Sum Hospital Bhubaneswar',
"type": 'Hospital'
},
{
"title": 'Puri Jagannath Temple',
"lat": '19.8047818',
"lng": '85.81824589999997',
"description": 'Puri Jagannath Temple',
"type": 'Temple'
},
{
"title": 'Big Bazaar Satya Nagar Bhubaneswar',
"lat": '20.27834039999999',
"lng": '85.84536690000004',
"description": 'Big Bazaar Satya Nagar Bhubaneswar',
"type": 'Mall'
},
{
"title": 'Infosys Patia Bhubaneswar',
"lat": '20.3415279',
"lng": '85.80446619999998',
"description": 'Infosys Patia Bhubaneswar',
"type": 'Company'
}
];

On first time load the map properties mentioned.

var mapOptions = {
center: new google.maps.LatLng(markers[1].lat, markers[1].lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

I added marker properties here.

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.BOUNCE,
icon: new google.maps.MarkerImage(icon)
});

I added the description with infowindow.

(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);

i added here div id relate with google map.

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
<div id="dvMap">
</div>

Then i have added legends to identity type of places.

<div id="Marker Notification" style="font-size: x-large; font-family: Arial Black; background-color:pink; color:blue; text-align: center">
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />
Temple
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/blue.png" />
Hospital @*<br/>*@
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />
Mall
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/green.png" />
Company
</div>

I set the animated bounce marker with colors and png image format.

var icon = "";
switch (data.type) {
case "Temple":
icon = "red";
break;
case "Hospital":
icon = "blue";
break;
case "Mall":
icon = "yellow";
break;
case "Company":
icon = "green";
break;
}
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.

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

Identify type of the places using marker colors in google map.
legends for markers useful.
How to implement in mvc and bootstrap.
In a city Bhubaneswar i specified the deifferent places with different marker colors.