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>