Click here to Skip to main content
14,300,422 members
Rate this:
Please Sign up or sign in to vote.
I want to update the markers on google map. Google map div is inside a updatepanel. I tried calling map loading JavaScript function by various means but no luck. function is getting called but map showing only old markers not updated one. To regenerate the scenario, i am doing it on tick of timer in below. Ontick, repeater datasource table is getting updated but not markers data.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=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 () {
                LoadMap();
            };
            //On UpdatePanel Refresh
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        LoadMap();
                    }
                });
            };
            function LoadMap() {
                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++) {
                    // alert(markers[i].description);
                    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>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="30000" OnTick="Timer1_Tick">
                </asp:Timer>
                <div id="dvMap" style="width: 500px; height: 500px">
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>


Following is my code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData("SELECT top 2 Name,lat as Latitude,long as Longitude,id as Description FROM tma_dump2 where city='Delhi' and id>10 ORDER BY Id");
        rptMarkers.DataSource = dt;
        rptMarkers.DataBind();
    }
}
protected void Timer1_Tick(object sender, EventArgs e)
{
    DataTable dt = this.GetData("SELECT top 2 Name,lat as Latitude,long as Longitude,id as Description FROM tma_dump2 where city='Mumbai' and id>10 ORDER BY Id");
    rptMarkers.DataSource = dt;
    rptMarkers.DataBind();
    UpdatePanel1.Update();
}


private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["TMA"].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;
            }
        }
    }
}


It's evident that i am doing something horribly wrong. Please enlighten me.

What I have tried:

I tried my best to resolve this case but didn't get any clue from here.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100