Display Marker on Google Map on GridView Row Click using jQuery

Hi bakhtawar,

I have created sample that full-fill your requirement.

HTML

<asp:Button ID="BtnShow" Text="Show" runat="server" OnClick="BtnShow_Click" />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="SiNo" HeaderText="SiNo" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Latitude" HeaderText="Latitude" />
        <asp:BoundField DataField="Longitude" HeaderText="Longitude" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
    </Columns>
</asp:GridView>
<br />
<div id="dvMap" style="width: 500px; height: 500px">
</div>
<div>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCI2rrQ6FeYu6JvgvhkhgKYLLKxkDxem78o"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[Id*=GridView1] tr:not(:has(th))").on("click", function () {
                var siNo, name, lat, long, description;
                siNo = $(this).find('td')[0].innerHTML;
                name = $(this).find('td')[1].innerHTML;
                lat = $(this).find('td')[2].innerHTML;
                long = $(this).find('td')[3].innerHTML;
                description = $(this).find('td')[4].innerHTML;
                var LatLng = new google.maps.LatLng(lat, long);
                var mapOptions = { center: LatLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                var marker = new google.maps.Marker({ position: LatLng, map: map, title: "<div style = 'height:100px;width:200px'>" + description + "</div>" });
                google.maps.event.addListener(marker, "click", function (e) {
                    var infoWindow = new google.maps.InfoWindow();
                    infoWindow.setContent(marker.title);
                    infoWindow.open(map, marker);
                });
            });
        });
    </script>
</div>

Code

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;
            }
        }
    }
}

protected void BtnShow_Click(object sender, EventArgs e)
{
    DataTable dt = this.GetData("SELECT ROW_NUMBER() OVER(ORDER BY (SELECT 0)) SiNo,Name,Latitude,Longitude,Description FROM Locations");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

SQL

CREATE TABLE [dbo].[Locations](
	[Name] [varchar](50) NOT NULL,
	[Latitude] [numeric](18, 6) NOT NULL,
	[Longitude] [numeric](18, 6) NOT NULL,
	[Description] [varchar](300) NULL,
 CONSTRAINT [PK_Table_1] PRIMARY KEY CLUSTERED 
(
	[Name] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

Screenshot