Post
Ask Question

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.

  1.     <script>  
  2.         function MyFunction(latval, longval)  
  3.         {  
  4.   
  5.             document.getElementById("MapArea").style.display = "block";  
  6.             initialize(latval, longval);  
  7.               
  8.         }  
  9.     </script>  
  10.   
  11.   
  12.  <script>  
  13.         function initialize(latvalue, longvalue) {  
  14.             var latvar = latvalue  
  15.             var longvar = longvalue  
  16.             var mapProp = {  
  17.                 center: new google.maps.LatLng(latvar, longvalue),  
  18.                 zoom: 15,  
  19.                 mapTypeId: google.maps.MapTypeId.ROADMAP  
  20.   
  21.             };  
  22.             var map = new google.maps.Map(document.getElementById("MapArea"), mapProp);  
  23.         }  
  24. </script>  
How JavaScript code work/ JavaScript code explaination:

In initialize method you can see: 
  1. We give value of Lat and Long value.
  2. Zoom property you can change according to your requirement.
  3. 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:

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

    You can use classic ADO.NET code also.

  2. WebForm: HTML code and JavaScript function.

  3. GridView inside WebForm: To display data in GridView.

  4. JavaScript code: Which execute map on webform.

Step by Step implementation of Google Map:

  1. Create a new website project named “GoogleMap”,

    create

  2. Insert a new WebForm called : “Default.aspx”

    Right click on solution explorer, Select Add, Add New Item, then insert a New WebForm

    add

  3. 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>  
  4. 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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head id="Head1" runat="server">  
  7.     <title></title>  
  8.     <script src="http://maps.googleapis.com/maps/api/js"></script>  
  9.     <script>  
  10.         function initialize(latvalue, longvalue) {  
  11.             var latvar = latvalue  
  12.             var longvar = longvalue  
  13.             var mapProp = {  
  14.                 center: new google.maps.LatLng(latvar, longvalue),  
  15.                 zoom: 15,  
  16.                 mapTypeId: google.maps.MapTypeId.ROADMAP  
  17.             };  
  18.             var map = new google.maps.Map(document.getElementById("MapArea"), mapProp);  
  19.         }  
  20.     </script>  
  21.   
  22.     <script>  
  23.         function MyFunction(latval, longval) {  
  24.   
  25.             document.getElementById("MapArea").style.display = "block";  
  26.             initialize(latval, longval);  
  27.   
  28.         }  
  29.     </script>  
  30. </head>  
  31. <body>  
  32.     <form id="form1" runat="server">  
  33.   
  34.         <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">  
  35.             <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />  
  36.             <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />  
  37.             <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />  
  38.             <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />  
  39.             <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />  
  40.             <SortedAscendingCellStyle BackColor="#FFF1D4" />  
  41.             <SortedAscendingHeaderStyle BackColor="#B95C30" />  
  42.             <SortedDescendingCellStyle BackColor="#F1E5CE" />  
  43.             <SortedDescendingHeaderStyle BackColor="#93451F" />  
  44.         </asp:GridView>  
  45.   
  46.         <br />  
  47.         <br />  
  48.         <div id="MapArea" style="width:1100px;height:380px;display:none"></div>  
  49.     </form>  
  50. </body>  
  51. </html>  
Default.aspx.cs file code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.   
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         GoogleMapDataClassesDataContext db = new GoogleMapDataClassesDataContext();  
  14.         dynamic FriendList = db.tblFriends.ToList();  
  15.   
  16.         GridView1.DataSource = FriendList;  
  17.         GridView1.DataBind();  
  18.   
  19.     }  
  20.   
  21.     protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)  
  22.     {  
  23.         GridViewRow row = GridView1.SelectedRow;  
  24.         string varlat = row.Cells[6].Text;  
  25.         string varlong = row.Cells[7].Text;  
  26.         Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "MyFunction(" + varlat + "," + varlong + ")", true);  
  27.     }  
  28.   
  29.       
  30. }  
Web.Config file code
  1. <?xml version="1.0"?>  
  2. <!--  
  3.   For more information on how to configure your ASP.NET application, please visit  
  4.   http://go.microsoft.com/fwlink/?LinkId=169433  
  5.   -->  
  6. <configuration>  
  7.   <system.web>  
  8.     <compilation debug="true" strict="false" explicit="true" targetFramework="4.5">  
  9.       <assemblies>  
  10.         <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>  
  11.       </assemblies>  
  12.     </compilation>  
  13.     <httpRuntime targetFramework="4.5"/>  
  14.   </system.web>  
  15.   <connectionStrings>  
  16.     <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"/>  
  17.   </connectionStrings>  
  18. </configuration>  
Output 
  1. Clicked on Friend ID : 5 row.

    You can see its showing Malad, Mumbai, Maharashtra.

    output

  2. Clicked on Friend ID : 2 row.

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

    output
Other useful link of my article:
  1. DBML


Similar Articles