Monday, 20 June 2016

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

6/20/2016 - By Pranav Singh 1

This article will show you how you can dynamically display latitude and longitude value on google map from sql server in using  In this I have fetched save detail from sql server database and display it on google map using c# in

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 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="">
<head runat="server">
    <style type="text/css">
        html {
            height: 100%;

        body {
            height: 100%;
            margin: 0;
            padding: 0;

        #map_canvas {
            height: 100%;
    <script src="" 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,
            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.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) {
              , marker);
                })(marker, data);
    <form id="form1" runat="server">
            <div id="map_canvas" style="width: 1150px; height: 450px">

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);
            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]);
            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

1 comment:

  1. how i save database data to outputval ? (dont'know json much)


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


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


Global Classified :
© 2014 Designed by Bloggertheme9.
back to top