Google Maps API: Display Google Maps inside ASP.Net GridView using JavaScript

Last Reply one year ago By Mudassar

Posted one year ago

hi 

i want to add map location in my application. i am having latitude and longitude data. i created div tag inside the gridview control and i want to add map location inside tat position which i pointed in my attached image. would you help me to get the solution for my question. otherwise say better idea to add map location inside the gridview control.screenshot

You are viewing reply posted by: Mudassar one year ago.
Posted one year ago

You can display Google Maps inside GridView in following way.

Database
Table named as Locations.

Show Google Maps using Latitude and Longitude in ASP.Net

In the above table I have inserted Longitude and Latitude information of three different cities, along with their names and descriptions.

Show Google Maps using Latitude and Longitude in ASP.Net

Download Database SQL

HTML

<asp:GridView ID="gvMaps" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-CssClass="Name" />
        <asp:BoundField DataField="Latitude" HeaderText="Latitude" ItemStyle-CssClass="Latitude" />
        <asp:BoundField DataField="Longitude" HeaderText="Longitude" ItemStyle-CssClass="Longitude" />
        <asp:TemplateField>
            <ItemTemplate>
                <div class="GoogleMap" style="height: 150px; width: 150px">
                </div>
                <span class="Description" style="display: none">
                    <%# Eval("Description") %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Namespaces

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData("SELECT * FROM Locations");
        gvMaps.DataSource = dt;
        gvMaps.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;
            }
        }
    }
}

Script

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<API Key>"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=gvMaps] TR").each(function (index) {
            if (index > 0) {
                var marker = {
                    title: $(this).find(".Name").html(),
                    lat: $(this).find(".Latitude").html(),
                    lng: $(this).find(".Longitude").html(),
                    description: $(this).find(".Description").html()
                };
                var dvMap = $(this).find(".GoogleMap")[0];
                LoadMap(marker, dvMap);
            }
        });
    });
    function LoadMap(marker, dvMap) {
        var mapOptions = {
            center: new google.maps.LatLng(marker.lat, marker.lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(dvMap, mapOptions);
        var myLatlng = new google.maps.LatLng(marker.lat, marker.lng);
        var m = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: marker.title
        });
        (function (m, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(marker.description);
                infoWindow.open(map, marker);
            });
        })(m, marker);
    };
</script>

Screenshot