@{
    ViewBag.Title = "Satyaprakash Metro City Google Map";
}

<title>@ViewBag.Title</title> //The Title will show Here.

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash Google Map Using Asp.net MVC</h2>
<fieldset>
    <legend style="font-family: Arial Black; color: blue; font-size: large;">Check Metro City Using Google Map</legend>
    <div id="SatyaMap" style="width: 1240px; height: 400px;">
        @*set google map size .*@
    </div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1ACzVp8FMkjnEMbHMAMDrzR-AdZUuqaI&libraries=geometry"></script> @*api key after sign in your google account.*@
    <script type="text/javascript">

        var markers = @Html.Raw(ViewBag.Markers); //all string value of column properties to viewbag.
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[3].lat, markers[3].lng), //which city will be shown.
                zoom: 9, //google map page zoom
                mapTypeId: google.maps.MapTypeId.ROADMAP //type of view.
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("SatyaMap"), mapOptions);//pass div id and google map load values.
            for (i = 0; i < markers.length; i++) { //here load all city map name
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng); //here i assigned lat and long.
                var marker = new google.maps.Marker({
                    position: myLatlng, //lat and long value
                    map: map, //div id
                    title: data.title //city name
                });
                (function (marker, data) { //here city map description after click on it.
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description); //city description value
                        infoWindow.open(map, marker); //then pop will show  the description
                    });
                })(marker, data);
            }
        }
    </script>
</fieldset>

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Configuration;
using System.Data.SqlClient;

namespace dtp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home  
        public ActionResult Index()
        {
            string markers = "[";
            string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            SqlCommand cmd = new SqlCommand("Sp_GeoLoc");
            using (SqlConnection con = new SqlConnection(conString))
            {
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        markers += "{";
                        markers += string.Format("'title': '{0}'", sdr["Терр_единица"]);
                        markers += string.Format("'description': '{0}'", sdr["Код_дороги"]);
                        markers += string.Format("'description': '{0}',", sdr["Название_дороги"]);
                        markers += string.Format("'description': '{0}'", sdr["Тип_дороги"]);
                        markers += string.Format("'description': '{0}'", sdr["Адрес"]);
                        markers += string.Format("'description': '{0}'", sdr["Вид_ДТП"]);
                        markers += string.Format("'description': '{0}'", sdr["Дата"]);
                        markers += string.Format("'description': '{0}'", sdr["Время"]);
                        markers += string.Format("'description': '{0}'", sdr["Причина_ДТП"]);
                        markers += string.Format("'description': '{0}'", sdr["Пострадавшие"]);
                        markers += string.Format("'description': '{0}'", sdr["Погибшие"]);
                        markers += string.Format("'description': '{0}'", sdr["Транспортные_средства"]);
                        markers += string.Format("'description': '{0}'", sdr["Участники"]);
                        markers += string.Format("'lat': '{0}',", sdr["Широта"]);
                        markers += string.Format("'lng': '{0}',", sdr["Долгота"]);
                        markers += string.Format("'description': '{0}'", sdr["FID"]);
                        markers += string.Format("'description': '{0}'", sdr["Поле"]);
                        markers += "},";
                    }

                }
                con.Close();
            }

            markers += "];";
            ViewBag.Markers = markers;
            return View();
        }
    }
}