Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Refreshing Google map under Update Panel by using Timer control

$
0
0

I have a google map on web page which I wish to refresh after every certain time of period.

In order to do that I kept google map under the UpdatePanel and place a timer control outside the update panel, set the interval 5000 mili seconds. On the Tick event of timer control I called the method which is collecting the coordinates and put on the google map and suppose it should work but it is not working.

The page refresh but the map area goes out after first refresh and never get back.

Can anyone help?

<asp:Timer ID="mapTimer" runat="server" Interval="5000"></asp:Timer><asp:UpdatePanel ID="mapPanel" runat="server" updatemode="Always" ><ContentTemplate><div id="map"></div><script>

    var map, infoWindow;
    var startLocation_lat, startLocation_lng;
    //var mapTimer = setInterval(initialize, 32000);      // Auto refresh the google map every after 10 seconds

    function initialize() {

        var coordinates = {<%=Coordinates%>};

        // Picking up the first location latitude and longitude to keep the location in center of the map

        for (var ab in coordinates) {
            for (cd = 0; cd < coordinates[ab].length; cd++) {
                if (cd == coordinates[ab].length - 1) {
                    startLocation_lat = coordinates[ab][cd][1];
                    startLocation_lng = coordinates[ab][cd][2];
                }
            }
        }

        var mapOptions = {
            zoom: <%=MapZoomValue%>,
            center: new google.maps.LatLng(startLocation_lat, startLocation_lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var bounds = new google.maps.LatLngBounds();
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var myarr = [];
        for (var i in coordinates) {
            for (j = 0; j < coordinates[i].length; j++) {
                myarr.push(new google.maps.LatLng(coordinates[i][j][1], coordinates[i][j][2]));
            }

            var mypath = new google.maps.Polyline({
                path: myarr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.5,
                strokeWeight: 6,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            mypath.setMap(map);
            myarr = [];
        }

        var image = "images/icon-car-2.png";
        //var image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
        var shape = {
            coords: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };

        var infowindow = new google.maps.InfoWindow();
        var mouseover_text, click_text;

        for (var a in coordinates) {

            for (var b = 0; b < coordinates[a].length; b++) {

                if (b == coordinates[a].length - 1) {

                    mouseover_text = coordinates[a][b][0];
                    click_text = coordinates[a][b][3];

                    var marker = new google.maps.Marker({
                        position: { lat: coordinates[a][b][1], lng: coordinates[a][b][2] },
                        map: map,
                        icon: image,
                        shape: shape
                    });

                    google.maps.event.addListener(marker, 'click', function (event) {
                        infowindow.setContent(click_text);
                        infowindow.open(map, marker);
                    });

                    google.maps.event.addListener(marker, 'mouseover', function (event) {
                        infowindow.setContent(mouseover_text);
                        infowindow.open(map, marker);
                    });
                    marker.setMap(map);
                }
            }
        }


    }

    window.onload = initialize;

</script><script async defer src="https://maps.googleapis.com/maps/api/js?key=<map-api-key>&callback=initialize"></script></ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="mapTimer" EventName="Tick" /></Triggers></asp:UpdatePanel> 


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>