how to load googlemap using latitude longitude in mvc dynamc

Controller:

public ActionResult Index()
{
string Cmarkers = "[";
string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
SqlCommand cmd = new SqlCommand("SELECT * FROM CityLocations");
using (SqlConnection con = new SqlConnection(conString))
{
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
Cmarkers += "{";
Cmarkers += string.Format("'lat': '{0}',", sdr["Latitude"]);
Cmarkers += string.Format("'lng': '{0}',", sdr["Longitude"]);
Cmarkers += "},";
}
}
con.Close();
}
Cmarkers += "];";
ViewBag.Location = Cmarkers;
return View();
}

View:

"text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key">
"text/javascript">
var Cmarkers = @Html.Raw(ViewBag.Location);
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(Cmarkers[0].lat, Cmarkers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < Cmarkers.length; i++) {
var data = Cmarkers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.open(map, marker);
});
})(marker, data);
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Nakul Chaudhari9y ago
Accepted answer
Controller:
public ActionResult Index()
    {
        string Cmarkers = "[";
        string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        SqlCommand cmd = new SqlCommand("SELECT * FROM CityLocations");
        using (SqlConnection con = new SqlConnection(conString))
        {
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    Cmarkers += "{";
                    Cmarkers += string.Format("'lat': '{0}',", sdr["Latitude"]);
                    Cmarkers += string.Format("'lng': '{0}',", sdr["Longitude"]);
                    Cmarkers += "},";
                }
            }
            con.Close();
        }

        Cmarkers += "];";
        ViewBag.Location = Cmarkers;
        return View();
    }
View:
"text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key">
   "text/javascript">
       var Cmarkers = @Html.Raw(ViewBag.Location);
       window.onload = function () {
           var mapOptions = {
               center: new google.maps.LatLng(Cmarkers[0].lat, Cmarkers[0].lng),
               zoom: 8,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           var infoWindow = new google.maps.InfoWindow();
           var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
           for (i = 0; i < Cmarkers.length; i++) {
               var data = Cmarkers[i]
               var myLatlng = new google.maps.LatLng(data.lat, data.lng);
               var marker = new google.maps.Marker({
                   position: myLatlng,
                   map: map,
                   title: data.title
               });
               (function (marker, data) {
                   google.maps.event.addListener(marker, "click", function (e) {
                       infoWindow.open(map, marker);
                   });
               })(marker, data);
           }
       }
0