This
article will show you how you can dynamically display latitude and longitude
value on google map from sql server in asp.net using c#.net. In
this I have fetched save detail from sql server database and display it on
google map using c# in asp.net.
Some of my
previous articles are as follows: Credit Card Data Format Validation Using
jQuery In Asp.Net, Enable and Disable Asp.Net FileUpload Control
Using JavaScript, Enable and Disable Asp.Net FileUpload Control
Using jQuery, How to Enable or Disable
Requiredfieldvalidator in Asp.Net Using jQuery, Dynamically Display Images From Folder By
Ajax Using jQuery In Asp.net ,C#, Read and Show CSV File Data In DataList Using
C#.Net in Asp.net, Bind GridView To DataTable and Convert
GridView Data Into Chart In Asp.Bet Using jQuery, Dynamic Histogram Google Chart in asp.net MVC
using C#.net, JavaScript, Point Chart in Asp.Net Using C#.Net and
VB.Net, Pie Chart in Asp.Net Using C#.Net and VB.Net.
First we
will create the table in sql with following fields.
After adding some value your table look as below
After table
we will create a new asp.net application and add the below html code on the
page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebApplication7.WebForm5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var markers =<%=outputVal%>;
var mapOptions = {
center: new google.maps.LatLng(33.375321,
99.345116),
zoom: 5,
mapTypeId:
google.maps.MapTypeId.ROADMAP,
marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new
google.maps.Map(document.getElementById("map_canvas"), 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) {
// Attaching a click event to
the current marker
google.maps.event.addListener(marker, "click", function
(e) {
infoWindow.setContent(data.description);
infoWindow.open(map,
marker);
});
})(marker, data);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="map_canvas" style="width: 1150px; height: 450px">
</div>
</div>
<script>initialize();</script>
</form>
</body>
</html>
|
In above
code I have added the google js library reference and then google map
initializer to show the map on page.
Initialize()
function I have used a var markers
=<%=outputVal%>;. This piece of code will take data from code
behind in json format and display on map. “outPutVal” is a public string type
variable which is declared in code behind.
Now we will
check the code behind code.
using System;
using System.Collections.Generic;
using System.Data;
using
System.Web.Script.Serialization;
namespace WebApplication7
{
public partial class WebForm5 : System.Web.UI.Page
{
public string
outputVal = "";
protected void
Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt = GetDataFromDataBase();
string output = ConvertDataTableToJSON(dt);
outputVal = output;
}
/// <summary>
/// Get you data
/// </summary>
/// <returns></returns>
public DataTable
GetDataFromDataBase()
{
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection("----Your connection
string-----");
string query="Select * from Your_Table_Name;";
SqlDataAdapter da = new SqlDataAdapter(query, con);
da.Fill(dt);
return dt;
}
/// <summary>
/// converting DataTable into Json
/// </summary>
/// <param
name="dt"></param>
/// <returns></returns>
public string ConvertDataTableToJSON(DataTable dt)
{
JavaScriptSerializer jSonString = new JavaScriptSerializer();
List<Dictionary<string, object>>
rows = new List<Dictionary<string, object>>();
Dictionary<string, object>
row;
foreach (DataRow
dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName,
dr[col]);
}
rows.Add(row);
}
return jSonString.Serialize(rows);
}
}
}
|
In above
code please check the method GetDataFromDataBase(). This method is used
for storing the data of database. I have used static data prepared the
datatable. You can get data from Database and store into datable.
After this I
have converted the datable into the json format. In above code just check the
public string variable “public string outputVal =
"";” This is the most important variable for this article.
We will store the json object into this variable and pass it to javascript
fuinction. Now we have done run the application to check the output.
About the Author
how i save database data to outputval ? (dont'know json much)
ReplyDelete