connectseekers.com

Monday, 20 June 2016

Display Latitude and Longitude Value on Google Map from Sql Server Data Base in Asp.net Using C#.Net

6/20/2016 - By Pranav Singh 0

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.


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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top