Bind Google Map Marker from database inside User Control using C# and VB.Net in ASP.Net

alex0230
 
on May 17, 2021 11:21 PM
Sample_134955.zip
957 Views

In my aspx page I try use this script:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

when I try to use map in web user control map not displayed.

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MapWithTopClients.ascx.vb" Inherits="CWDash.CWDash.MapWithTopClients" %>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?map_id=mapid&key=mykey&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({
                position: myLatlng,
                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>

 

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            rptMarkers.DataBind()
        End Sub
 
        Private Sub rptMarkers_DataBinding(sender As Object, e As EventArgs) Handles rptMarkers.DataBinding
            Dim dt As New DataTable '= Me.GetData("select * from Locations")
            Dim myConnection As New SqlClient.SqlConnection("my conn string")
            Dim myCommand As New SqlCommand("select * from Locations", myConnection)
            Dim myAdapter As New SqlDataAdapter(myCommand)
            myAdapter.Fill(dt)
            rptMarkers.DataSource = dt
        End Sub

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 19, 2021 01:58 AM

Hi alex0230,

Check this example. Now please take its reference and correct your code.

UserControl

<%@ Control Language="VB" AutoEventWireup="true" CodeFile="MapControl.ascx.cs" Inherits="MapControl" %>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key"></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({
                position: myLatlng,
                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>

Namespaces

C#

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

VB.Net

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    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;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As DataTable = Me.GetData("SELECT * FROM Locations")
    rptMarkers.DataSource = dt
    rptMarkers.DataBind()
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand(query)
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

HTML

<%@ Register Src="~/MapControl.ascx" TagName="Map" TagPrefix="uc" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <uc:Map ID="ucMap" runat="server" />
    </form>
</body>
</html>

Screenshot