Google Map From Database

In this article you will learn how to render a Google Map from table. In this we receive dynamically Lat, Long from Gridview and GridView is received from database table we transfer value into JavaScript function. The rest of the things are done by our JavaScript and html under ASP.NET project.

We having friend list grids where user click on particular friend row (Select Button). Selected friend map will display just below of the grid.

<script>
function MyFunction(latval, longval)
{
document.getElementById("MapArea").style.display = "block";
initialize(latval, longval);
}
</script>
<script>
function initialize(latvalue, longvalue) {
var latvar = latvalue
var longvar = longvalue
var mapProp = {
center: new google.maps.LatLng(latvar, longvalue),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("MapArea"), mapProp);
}
</script>

How JavaScript code work/ JavaScript code explaination:

In initialize method you can see:

We give value of Lat and Long value.
Zoom property you can change according to your requirement.
mapTypeId: google.maps.MapTypeId.ROADMAP

Map Type Id given below with description.

There are the following types of MapTypeId you can change:

GOOGLE MAP TYPE	DESCRIPTION
HYBRID	To display roads and city names
ROADMAP	To displays normal map (Default type of map)
SATELLITE	To displays satellite map
TERRAIN	To displays terrain, mountains, rivers, etc.

In this whole process we have used the following things:

DBML: Linq to SQL: To fetch the records from database table.

You can use classic ADO.NET code also.
WebForm: HTML code and JavaScript function.
GridView inside WebForm: To display data in GridView.
JavaScript code: Which execute map on webform.

Step by Step implementation of Google Map:

Create a new website project named “GoogleMap”,
Insert a new WebForm called : “Default.aspx”

Right click on solution explorer, Select Add, Add New Item, then insert a New WebForm
Double click on Web.config file and Configure database connectionstring settings in WEB.CONFIG
1. <connectionStrings>
2. <add name="GoogleMapConnectionString" connectionString="Data Source=112.118.AB.50A\sa;Initial Catalog=MBKTest;Persist Security Info=True;User ID=sa;Password=mbkerver" providerName="System.Data.SqlClient"/>
3. </connectionStrings>
Insert a new “LINQ to SQL Classes”,

As you click for inserting LINQ to SQL classes this will asked for put DBML inside APP_CODE , select YES...

NOTE: Always put your DBML inside APP_CODE folder thats better.

Default.aspx file code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize(latvalue, longvalue) {
var latvar = latvalue
var longvar = longvalue
var mapProp = {
center: new google.maps.LatLng(latvar, longvalue),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("MapArea"), mapProp);
}
</script>
<script>
function MyFunction(latval, longval) {
document.getElementById("MapArea").style.display = "block";
initialize(latval, longval);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateSelectButton="True" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" style="margin-bottom: 0px">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
<br />
<br />
<div id="MapArea" style="width:1100px;height:380px;display:none"></div>
</form>
</body>
</html>

Default.aspx.cs file code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GoogleMapDataClassesDataContext db = new GoogleMapDataClassesDataContext();
dynamic FriendList = db.tblFriends.ToList();
GridView1.DataSource = FriendList;
GridView1.DataBind();
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow row = GridView1.SelectedRow;
string varlat = row.Cells[6].Text;
string varlong = row.Cells[7].Text;
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "MyFunction(" + varlat + "," + varlong + ")", true);
}
}

Web.Config file code

<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug="true" strict="false" explicit="true" targetFramework="4.5">
<assemblies>
<add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
</assemblies>
</compilation>
<httpRuntime targetFramework="4.5"/>
</system.web>
<connectionStrings>
<add name="GoogleMapConnectionString" connectionString="Data Source=112.118.AB.50A\sa;Initial Catalog=MBKTest;Persist Security Info=True;User ID=sa;Password=mbkerver" providerName="System.Data.SqlClient"/>
</connectionStrings>
</configuration>

Output

Clicked on Friend ID : 5 row.

You can see its showing Malad, Mumbai, Maharashtra.
Clicked on Friend ID : 2 row.

You can see its showing Phalodi, District-Jodhpur,Rajasthan.

Other useful link of my article:

DBML

9 Comments

Join the conversation! Your thoughts help the community grow.

Manoj Kalla10y ago
Thank you, Shobana J, Subash, Deepak Hire
- Subash10y ago
  Welcome sir
deepak hire10y ago
Good One
Subash10y ago
Nice
Shobana J10y ago
Good share
Kuppurasu Nagaraj10y ago
Nice Sharing..
- Manoj Kalla10y ago
  Thank You, Kuppurasu
Pankaj Kumar Choudhary10y ago
Useful Article........
- Manoj Kalla10y ago
  Thank You, Pankaj