locked
Grid data on google map RRS feed

  • Question

  • User639567535 posted

    how to display data on google map from gridview

    Thursday, September 15, 2016 7:00 AM

All replies

  • User347430248 posted

    Hi Bakhtawar,

    instead of taking data from gridview you can directly fetch it from database.

    public string ConvertDataTabletoString()
    
    {
    
    DataTable dt = new DataTable();
    
    using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=master;Integrated Security=true"))
    
    {
    
    using (SqlCommand cmd = new SqlCommand("select title=City,lat=latitude,lng=longitude,description from LocationDetails", con))
    
    {
    
    con.Open();
    
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    
    da.Fill(dt);
    
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.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 serializer.Serialize(rows);
    
    }
    
    }
    
    }

    you can use your code to display data in gridview.

    Reference:

    Asp.net Show Multiple Markers on Google Map V3 from Database with JavaScript

    Regards

    Deepak

    Friday, September 16, 2016 9:40 AM
  • User639567535 posted

    please check updated question

    Saturday, September 17, 2016 6:29 AM
  • User347430248 posted

    Hi Bakhtawar,

    you can try to use the code mentioned below to show the gridview data on map.

    it will take the latitude and longitude from gridview and display it on map.

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    
    <script type="text/javascript">
    
    var markers = [
    
    <asp:Repeater ID="rptMarkers" runat="server">
    
    <ItemTemplate>
    
                {
    
                "title": '<%# Eval("Name") %>',
    
                "lat": '<%# Eval("Latitude") %>',
    
                "lng": '<%# Eval("Longitude") %>',
    
                "description": '<%# Eval("Description") %>'
    
            }
    
    </ItemTemplate>
    
    <SeparatorTemplate>
    
        ,
    
    </SeparatorTemplate>
    
    </asp:Repeater>
    
    ];
    
    </script>
    
    <script type="text/javascript">
    
        window.onload = function () {
    
            var mapOptions = {
    
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    
                zoom: 8,
    
                mapTypeId: google.maps.MapTypeId.ROADMAP
    
            };
    
            var infoWindow = new google.maps.InfoWindow();
    
            var map = new google.maps.Map(document.getElementById("dvMap"), 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({
    
                    ,
    
                    map: map,
    
                    title: data.title
    
                });
    
                (function (marker, data) {
    
                    google.maps.event.addListener(marker, "click", function (e) {
    
                        infoWindow.setContent(data.description);
    
                        infoWindow.open(map, marker);
    
                    });
    
                })(marker, data);
    
            }
    
        }
    
    </script>
    
    <div id="dvMap" style="width: 500px; height: 500px">
    
    </div>

    code behind

    protected void Page_Load(object sender, EventArgs e)
    
    {
    
       if (!this.IsPostBack)
    
        {
    
            DataTable dt = this.GetData("select * from Locations");
    
            rptMarkers.DataSource = dt;
    
            rptMarkers.DataBind();
    
        }
    
    }
    
     
    
    private DataTable GetData(string query)
    
    {
    
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    
        SqlCommand cmd = new SqlCommand(query);
    
        using (SqlConnection con = new SqlConnection(conString))
    
        {
    
            using (SqlDataAdapter sda = new SqlDataAdapter())
    
            {
    
                cmd.Connection = con;
    
     
    
                sda.SelectCommand = cmd;
    
                using (DataTable dt = new DataTable())
    
                {
    
                    sda.Fill(dt);
    
                    return dt;
    
                }
    
            }
    
        }
    
    }

    Reference taken from:

    ASP.Net : Google Maps V3 with Multiple Markers Database Example

    Regards

    Deepak

     

    Wednesday, September 21, 2016 7:22 AM
  • User639567535 posted

    in info method there is two rows in dt .. and on map i am getting only marker means mean only 1 row so how i get both data on map ?

    any solution?

    Thursday, September 22, 2016 5:17 AM
  • User347430248 posted

    Hi bakhtawar,

    did you try to debug the code to check how many times loop executes and how many records it takes.

    also try to check it displays the correct point on Map.

    because it should display the all the point instead of just 1.

    Regards

    Deepak 

    Friday, September 23, 2016 6:55 AM
  • User639567535 posted

    I try this code for plotting data on google map and I plot it successfully but when I click on marker then small content window is open but all have same data whereas in table there is different table on every marker.

    Here is my code :

    success: function (result) {
                        var d = JSON.parse(result.d).response;
    
                        console.log(JSON.parse(result.d).response);
                        $("#tabledata").empty();
                        if (d.length > 0) {
                            $("#tabledata").append(
          "<thead><tr><th>No</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
    
                            for (var i = 0; i < d.length - 1; i++) {
                                if (d[i] !== null) {
                                    $("#tabledata").append("<tbody><tr><td>" +
                                 d[i][0] + "</td> <td>" +
                                 d[i][1] + "</td> <td>" +
                                 d[i][2] + "</td> <td>" +
                                 d[i][3] + "</td></tr></tbody>");
    
                                    Status = d[i][1];
                                    debugger;
                                    RegNo = d[i][0];
                                    latit = d[i][4];
                                    longi = d[i][3];
                                }
                            }
                        }
                        else {
                            $("#tabledata").hide();
                        }
                        alert(d.length);
                        var map;
                        debugger;
                        var latlng = new google.maps.LatLng(59.0895898, 78.0998546);
                        debugger;
                        var myOptions = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
    
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                        for (i = 0; i < d.length -1; i++) {
                            var data = d[i]
                            var myLatlng = new google.maps.LatLng(d[i][4], d[i][3]);
                            var marker = new google.maps.Marker({
                                ,
                                map: map,
                                title: 'Click me'
    
                            });
    var infowindow = new google.maps.InfoWindow({
    content: 'No:' + d[i][0] + '<br>Status:' + d[i][1] + '<br>Lat:' + d[i][3] + 'Long:' + d[i][4]
                            });
                     google.maps.event.addListener(marker, 'click', function () {
                     infowindow.open(map, marker,data);
                            });
    
                        }
                    },

    There is multiple marker on map when i click marker then window display but when i click on any other marker then same data is display and also all markers have same data when i click on marker but in table there is different data

    Friday, September 23, 2016 9:35 AM
  • User347430248 posted

    Hi Bakhtawar,

    The following part is displaying the data in the small window.

    var infowindow = new google.maps.InfoWindow({
    content: 'No:' + d[i][0] + '<br>Status:' + d[i][1] + '<br>Lat:' + d[i][3] + 'Long:' + d[i][4]
                            });
                     google.maps.event.addListener(marker, 'click', function () {
                     infowindow.open(map, marker,data);
                            });
    
                        }
                    },

    so try to debug the code look what data are passing when loop is executing.

    so that you can know that it takes all data or just taking the data from the 1st row and repeat that data.

    Regards

    Deepak

    Monday, September 26, 2016 8:45 AM
  • User639567535 posted

    I try this code This code is display marker with small content window on page load

        success: function (result) {
    
                        var d = JSON.parse(result.d).response;
                        console.log(JSON.parse(result.d).response);                    
                        $("#tabledata").empty();
                        if (d.length > 0) {
                            $("#tabledata").append(
          "<thead><tr><th>No</th><th>DateTime</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
    
                            for (var i = 0; i < d.length - 1; i++) {
                                if (d[i] !== null) {
                                    $("#tabledata").append("<tbody><tr><td>" +
                                      d[i][0] + "</td> <td>" +
                                     d[i][1] + "</td> <td>" +
                                     d[i][2] + "</td> <td>" +
                                     d[i][3] + "</td> <td>" +
                                     d[i][4] + "</td></tr></tbody>");
                                    Status = d[i][2];
                                    debugger;
                                    No = d[i][0];
                                    latit = d[i][4];
                                    longi = d[i][3];
                                }
                            }
                        }
                        else {
                            $("#tabledata").hide();
                        }
    
                        alert(d.length);
                        var map;
                        //var markers;
                        debugger;
                        var latlng = new google.maps.LatLng(54.0895898, 97.0998546);
                        debugger;
                        var myOptions = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        debugger;
                        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                        debugger;
    
                        debugger;
                        for (i = 0; i < d.length - 1; i++) {
                            var data = d[i]
                            var myLatlng = new google.maps.LatLng(d[i][4], d[i][3]);
                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                icon: "/images/small car.png",
                                map: map,
                                title: 'Click me'
    
                            });
                var infowindow = new google.maps.InfoWindow({
                content:'window'
    //content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]
                            });
               google.maps.event.addListener(marker, 'click', function () {
               infowindow.open(map, marker,data);
                            });
                            infowindow.open(map, marker,data);
    
                        }

    in this image when i click on 2nd car then content window is display whereas when i click on 1st image then same window is appear with same information whereas

    image

    Tuesday, September 27, 2016 7:48 AM
  • User347430248 posted

    Hi Bakhtawar,

    you did a mistake in the part of code mentioned below.

    var infowindow = new google.maps.InfoWindow({
                content:'window'
    //content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]
                            });
               google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker, data);
            });
            infowindow.open(map, marker,data);
    
     

    if you see the code then you will find that you had mention "content:''window".

    because of this line you are getting the same message as window instead of showing the data from database.

    you had commented a line "//content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]"

    this is the line which assigns the data from the database to content.

    but you commented it.

    so how it can be work and display the actual data.

    to make it correct remove the line "content:''window".

    and remove the comment from this line. "//content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]"

    and test it. it will work.

    Regards

    Deepak

    Thursday, September 29, 2016 9:01 AM
  • User639567535 posted

    ok i also remove this comment but same problem is  happens.. 

    Thursday, September 29, 2016 9:44 AM
  • User639567535 posted

    Hi Bakhtawar,

    you did a mistake in the part of code mentioned below.

    var infowindow = new google.maps.InfoWindow({
                content:'window'
    //content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]
                            });
               google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker, data);
            });
            infowindow.open(map, marker,data);
    
     

    if you see the code then you will find that you had mention "content:''window".

    because of this line you are getting the same message as window instead of showing the data from database.

    you had commented a line "//content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]"

    this is the line which assigns the data from the database to content.

    but you commented it.

    so how it can be work and display the actual data.

    to make it correct remove the line "content:''window".

    and remove the comment from this line. "//content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]"

    and test it. it will work.

    Regards

    Deepak


    ok i also remove this comment but same problem is  happens.. 

    Thursday, September 29, 2016 9:45 AM
  • User347430248 posted

    Hi Bakhtawar,

    you said you remove the comment from this line //content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4].

    but did you remove this line? content:'window'

    if not remove this line and test it again. if you had remove this line already then debug the code and tell me what value you get on the line below.

    content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]

    this line returns 4 values so it is not possible that it returned only 'window'.

    here I think that you did not remove the line content:'window' is the caused of issue here.

    Regards

    Deepak

    Friday, September 30, 2016 4:08 AM
  • User639567535 posted

    Deepak Panchal

    Hi Bakhtawar,

    you said you remove the comment from this line //content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4].

    but did you remove this line? content:'window'

    if not remove this line and test it again. if you had remove this line already then debug the code and tell me what value you get on the line below.

    content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4]

    this line returns 4 values so it is not possible that it returned only 'window'.

    here I think that you did not remove the line content:'window' is the caused of issue here.

    Regards

    Deepak

    obviosuly when i add this line content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][5] + 'Long:' + d[i][4] then i remove this line 

    content:'window'

    and problem is   only 1 content windows is open against both marker.. 

    like 

    RegNO: 345

    Status: normal:

    lat: 34.5677

    long: 45.234

    when i click on 1st marker then content window is display with these information but when i click on second marker then same info is display against 2nd marker whereas there is totally  different info for both markers 

    Friday, September 30, 2016 5:12 AM
  • User347430248 posted

    Hi Bakhtawar,

    can you post your whole code ? so that I can try to test it on my side.

    you had only post the part of the code. so I am not able to test it.

    if you can post we can try to find the issue in your code.

    Regards

    Deepak

    Friday, September 30, 2016 7:10 AM
  • User639567535 posted

    Deepak Panchal

    Hi Bakhtawar,

    can you post your whole code ? so that I can try to test it on my side.

    you had only post the part of the code. so I am not able to test it.

    if you can post we can try to find the issue in your code.

    Regards

    Deepak

    Friday, September 30, 2016 10:03 AM
  • User347430248 posted

    Hi Bakhtawar,

    you had only posted a JavaScript code.

    where is the designing code and code behind.

    Regards

    Deepak

    Tuesday, October 4, 2016 7:27 AM
  • User639567535 posted

    Hi Bakhtawar,

    you had only posted a JavaScript code.

    where is the designing code and code behind.

    Regards

    Deepak

    <div id="map_canvas">

    </div>

    <div class="panel" id="paneldiv">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div id="firstgrid">
    <asp:Label ID="Label1" style="margin-left: 220px;" runat="server" Text="Export to"></asp:Label>

    <table id="tabledata" class="display nowrap cell-border" style="width:100%;" cellspacing="0"></table>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>

    </div>

    Tuesday, October 4, 2016 10:37 AM
  • User347430248 posted

    Hi Bakhtawar ,

    and this time you did not post the code behind.

    I don't know that do you understand what called the whole code.

    I need javascript code, Design code and c# code then also I have to make a dummy table to test the data.

    and you are every time posting a single segment.

    then also I find an error in your script.

    you had make an mistake in writing brackets.

    which I had corrected and mentioned in the code below.

            <script type="text/javascript">
    
            $(function () {
                var No = '';
                var Status = '';
                var latit = '';
                var longi = '';
                 var ID = '<%=Session["ID"]%>';
                    var obj = {};
                    obj.ID = ID;         
                    getdata(obj);
                    return false;    
            });
            function getdata(obj) {
                 debugger;
                alert("map2");
                $.ajax({
                    type: "POST",
                    url: "home.aspx/info",
                    contentType: "application/json;charset=utf-8",        
                    data: "{'id':'" + obj.ID + "'}",
                    datatype: "json",
                    success: function (result) {
                        var d = JSON.parse(result.d).response;
    
                        console.log(JSON.parse(result.d).response);
                        
                        console.log(JSON.stringify(result.d).response);
    
                        $("#tabledata").empty();
                        if (d.length > 0) {
                            $("#tabledata").append(  "<thead><tr><th>No</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
                            for (var i = 0; i < d.length - 1; i++) {
                                if (d[i] !== null) {
                                    $("#tabledata").append("<tbody><tr><td>" +
                                      d[i][0] + "</td> <td>" +
                                      d[i][1] + "</td> <td>" +
                                      d[i][2] + "</td> <td>" +
                                      d[i][3] + "</td></tr></tbody>");
                                    Status = d[i][2];
                                    No = d[i][0];
                                    latit = d[i][4];
                                    longi = d[i][3];
                                    
                                }
                            }
                        }
    
    
    
    
                        else {
                            $("#tabledata").hide();
                        }
    
                        alert(d.length);
                        var map;
                        var latlng = new google.maps.LatLng(94.0895898, 87.0998546);
                        debugger;
                        var myOptions = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        debugger;
                        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                        debugger;
                        var image;
                        debugger;
                        for (i = 0; i < d.length - 1; i++) {
                            var data = d[i]
                            var myLatlng = new google.maps.LatLng(d[i][5], d[i][4]);
                            var marker = new google.maps.Marker({
                                ,
                                map: map,
                                title: 'Click me',
                            }); 
    
                            }
                            var infowindow = new google.maps.InfoWindow({
                                content: 'No:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][4] + 'Long:' + d[i][3]
                            });
                            google.maps.event.addListener(marker, 'click', function () {
                                infowindow.open(map, marker, data);
                            });
                            infowindow.open(map, marker, data);
                    },
                    error: function (error) {
                        alert("error")
                    }
                });
            }
           
                
        </script>

    Regards

    Deepak

    Thursday, October 6, 2016 7:55 AM
  • User639567535 posted

    Deepak Panchal

    Hi Bakhtawar ,

    and this time you did not post the code behind.

    I don't know that do you understand what called the whole code.

    I need javascript code, Design code and c# code then also I have to make a dummy table to test the data.

    and you are every time posting a single segment.

    then also I find an error in your script.

    you had make an mistake in writing brackets.

    which I had corrected and mentioned in the code below.

            <script type="text/javascript">
    
            $(function () {
                var No = '';
                var Status = '';
                var latit = '';
                var longi = '';
                 var ID = '<%=Session["ID"]%>';
                    var obj = {};
                    obj.ID = ID;         
                    getdata(obj);
                    return false;    
            });
            function getdata(obj) {
                 debugger;
                alert("map2");
                $.ajax({
                    type: "POST",
                    url: "home.aspx/info",
                    contentType: "application/json;charset=utf-8",        
                    data: "{'id':'" + obj.ID + "'}",
                    datatype: "json",
                    success: function (result) {
                        var d = JSON.parse(result.d).response;
    
                        console.log(JSON.parse(result.d).response);
                        
                        console.log(JSON.stringify(result.d).response);
    
                        $("#tabledata").empty();
                        if (d.length > 0) {
                            $("#tabledata").append(  "<thead><tr><th>No</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
                            for (var i = 0; i < d.length - 1; i++) {
                                if (d[i] !== null) {
                                    $("#tabledata").append("<tbody><tr><td>" +
                                      d[i][0] + "</td> <td>" +
                                      d[i][1] + "</td> <td>" +
                                      d[i][2] + "</td> <td>" +
                                      d[i][3] + "</td></tr></tbody>");
                                    Status = d[i][2];
                                    No = d[i][0];
                                    latit = d[i][4];
                                    longi = d[i][3];
                                    
                                }
                            }
                        }
    
    
    
    
                        else {
                            $("#tabledata").hide();
                        }
    
                        alert(d.length);
                        var map;
                        var latlng = new google.maps.LatLng(94.0895898, 87.0998546);
                        debugger;
                        var myOptions = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        debugger;
                        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                        debugger;
                        var image;
                        debugger;
                        for (i = 0; i < d.length - 1; i++) {
                            var data = d[i]
                            var myLatlng = new google.maps.LatLng(d[i][5], d[i][4]);
                            var marker = new google.maps.Marker({
                                ,
                                map: map,
                                title: 'Click me',
                            }); 
    
                            }
                            var infowindow = new google.maps.InfoWindow({
                                content: 'No:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][4] + 'Long:' + d[i][3]
                            });
                            google.maps.event.addListener(marker, 'click', function () {
                                infowindow.open(map, marker, data);
                            });
                            infowindow.open(map, marker, data);
                    },
                    error: function (error) {
                        alert("error")
                    }
                });
            }
           
                
        </script>

    Regards

    Deepak

    now this is whole code and when i try this content window is display on page load and i am done with this also when i close content window then when again click on image then only 1 window is display 

    <script type="text/javascript">
    
            $(function () {
    
                var No = '';
                var Status = '';
                var latit = '';
                var longi = '';
    
                var ID = '<%=Session["ID"]%>';
                
                    var obj = {};
                    obj.ID = ID;
                   
                    getdata(obj);
                    return false;
              
            });
          
            function getdata(obj) {
                 debugger;
                alert("map2");
                $.ajax({
                    type: "POST",
                    url: "home.aspx/info ",
                    contentType: "application/json;charset=utf-8",
                  
                    data: "{'id':'" + obj.ID + "'}",
                    datatype: "json",
                   
    
                    success: function (result) {
    
                        var d = JSON.parse(result.d).response;
    
                        $("#tabledata").empty();
                        if (d.length > 0) {
                            $("#tabledata").append(
          "<thead><tr><th>No</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
    
                            for (var i = 0; i < d.length - 1; i++) {
                                if (d[i] !== null) {
                                    $("#tabledata").append("<tbody><tr><td>" +
                                      d[i][0] + "</td> <td>" +
                                      d[i][1] + "</td> <td>" +
                                      d[i][2] + "</td> <td>" +
                                      d[i][3] + "</td></tr></tbody>");
                                    Status = d[i][2];
                                    No = d[i][0];
                                    latit = d[i][5];
                                    longi = d[i][4];
                                    $("#tabledata").dataTable({
                                        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
                                        "bSort": true,
                                        "scrollY": 100,
                                        "scrollX": true,
                                        dom: 'Blfrtip',
                                        lengthMenu: [
                                            [10, 25, 50, -1],
                                            ['10 rows', '25 rows', '50 rows', 'Show all']
                                        ],
                                        buttons: [
                                            'excelHtml5'
                                        ]
                                    });
                                }
                            }
                        }
                        else {
                            $("#tabledata").hide();
                        }
    
                        alert(d.length);
                        debugger;
                        var latlng = new google.maps.LatLng(64.0895898, 76.0998546);
                        debugger;
                        var myOptions = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        debugger;
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                        debugger;
                        var image;
                        debugger;
                        for (i = 0; i < d.length - 1; i++) {
                            var data = d[i]
                            var myLatlng = new google.maps.LatLng(d[i][5], d[i][4]);
                            var marker = new google.maps.Marker({
                                ,
                               icon:"images/car.png" ,
                                map: map,
                                title: 'Click me'
                          
                            });
                            debugger;
                           
                            var infowindow = new google.maps.InfoWindow({
                                content: 'No:' + d[i][0] + '<br>Status:' + d[i][1] + '<br>Lat:' + d[i][3] + '<br>Long:' + d[i][4]
                            });
                            marker.addListener('click', function () {
                            })
                            google.maps.event.addListener(marker, 'click', function () {
                                infowindow.open(map, marker, data);
                            });
                            infowindow.open(map, marker, data);
                           
                            }
                             
                            
                    },
                    error: function (error) {
                        alert("error")
                    }
                });
            }
           
                
        </script>
    
    Html code
    <div id="map_canvas">
    </div>
    <div class="panel" id="paneldiv">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div id="firstgrid">
    <asp:Label ID="Label1" style="margin-left: 220px;" runat="server" Text="Export to"></asp:Label>
    <table id="tabledata" class="display nowrap cell-border" style="width:100%;" cellspacing="0"></table>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
    
    </div>
    C# code
        public static string DataSetToJSON(DataTable dt)
            {
    
                Dictionary<string, object> dict = new Dictionary<string, object>();
    
                object[] arr = new object[dt.Rows.Count + 1];
    
                for (int i = 0; i <= dt.Rows.Count - 1; i++)
                {
                    arr[i] = dt.Rows[i].ItemArray;
                }
    
                dict.Add("response", arr);
               JavaScriptSerializer json = new JavaScriptSerializer();
               return json.Serialize(dict);
                //return new JavaScriptSerializer().Serialize(dict);
              
                
    
            }
    
            [WebMethod]
            public static string info(string id)
            {
                try
                {
                    string result = "";
                   
                    Entities er=new _Entities();
                    List<sp_Info__Result> sv=er.sp_Info(id).ToList();
                   
                    DataTable dt = new DataTable();
                     dt.Columns.Add("No", typeof(string));
                    dt.Columns.Add("Status", typeof(string));
                    dt.Columns.Add("Longitude", typeof(float));
                    dt.Columns.Add("Latitude", typeof(float));
    
                    foreach (var c in sv)
                    {
                       
                dt.Rows.Add(c.No,c.,c.Longitude,c.Latitude);
    
                       
                    }
                 result = DataSetToJSON(dt);
                   return result;
                 
                }
                catch (Exception ex)
                {
                    throw new Exception();
                }
    
            }
    

    Thursday, October 6, 2016 8:12 AM