Refer this for binding the Data from database
For Database take reference from this.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function () {
$('#GridView1 tr:has(td)').each(function () {
var lati = $(this).find('td:first').html();
var longi = $(this).find('td:nth-child(2)').html();
FindAddress(lati, longi, $(this))
});
});
function FindAddress(lati, longi, row) {
var lat = lati;
var lng = longi;
var latlng = new google.maps.LatLng(lat, lng);
var geocoder = geocoder = new google.maps.Geocoder();
var address;
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
address = results[1].formatted_address;
$("td", row).eq(2).html(address);
}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Latitude" HeaderText="Latitude" ItemStyle-Width="30" />
<asp:BoundField DataField="Longitude" HeaderText="Longitude" ItemStyle-Width="150" />
<asp:BoundField HeaderText="Address" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Namespaces
using System.Data;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
PopulateGridView();
}
}
private void PopulateGridView()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT [Latitude] ,[Longitude], '' AS [Address] FROM Locations", con))
{
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
da.Fill(dt);
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}
}
}
}
Screenshot