Description:
In this example we explain that how
to Integrate Google Maps in Asp.Net MVC.or how to display Google Map in MVC
Razor View. Or how to bind Location or country in google map in MVC 4.
Here we demonstrate that how to Integrate,
Populate and display Google Maps from database to razor view in Asp.Net MVC.so
how to bind Latitude and Longitude in google maps in MVC.or how to bind
multiple markers in google maps using MVC.
public class EmployeeController
: Controller
{
public ActionResult Index()
{
string
markers = "[";
string
conString = ConfigurationManager.ConnectionStrings["ConectionString"].ConnectionString;
SqlCommand
cmd = new SqlCommand("SELECT * FROM EmployeeLocations");
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["Name"]);
markers += string.Format("'lat':
'{0}',", sdr["Latitude"]);
markers += string.Format("'lng':
'{0}',", sdr["Longitude"]);
markers += string.Format("'description':
'{0}'", sdr["Description"]);
markers += "},";
}
}
con.Close();
}
markers += "];";
ViewBag.Markers = markers;
return
View();
}
}
View:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Integrate Google Maps in ASP.Net MVC</title>
</head>
<body>
<div
id="dv_EmployeeLocation"
style="width: 500px; height: 500px">
</div>
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_Key"></script>
<script
type="text/javascript">
var
markers = @Html.Raw(ViewBag.Markers);//here list
of Location are return from Controller
window.onload = function () {
var
mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
var
infoWindow = new google.maps.InfoWindow();
var
map = new
google.maps.Map(document.getElementById("dv_EmployeeLocation"),
mapOptions);
for
(i = 0; i < markers.length; i++) {
var
data = markers[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.setContent(data.description);
infoWindow.open(map,
marker);
});
})(marker, data);
}
}
</script>
</body>
</html>
0 comments:
Post a Comment