I’m new with Google map. I’m having problem in rebinding the data in my infowindow.
When I close the window using the "x" button in the upper right of the infowindow,
then open it again, all of the updated contents of the infowindow will load again to
its initial state instead of the latest update? What I want is that when I close the
infowindow, the infowindow must have the latest data.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="D:\Program Files\xampp\xampp\htdocs\googletest\progressBar.js"></script>
<script type="text/javascript">
//<![CDATA[
var infoWindow=new Array();
var htmlPrevious=new Array();
var html;
var marker=new Array();
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(7.11425, 124.83758),
zoom: 11,
mapTypeId: 'roadmap'
});
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
html = new Array(markers.length);
infowindow = new Array(markers.length);
for (var i = 0; i < markers.length; i++) {
infoWindow[i] = new google.maps.InfoWindow;
var sender = markers[i].getAttribute("sender");
var update = markers[i].getAttribute("update_time");
var name = markers[i].getAttribute("name");
var humidity = markers[i].getAttribute("humidity");
var temperature = markers[i].getAttribute("temperature");
var rain = markers[i].getAttribute("rain");
var wind_dir = markers[i].getAttribute("wind_dir");
var wind_speed = markers[i].getAttribute("wind_speed");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction: " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
htmlPrevious[i]=html[i];
marker[i] = new google.maps.Marker({
map: map,
position: point,
title: name
});
bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
}//end for loop
});//downloadurl
setInterval("refreshMarker()",1000);
}
function refreshMarker(){
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var sender = markers[i].getAttribute("sender");
var update = markers[i].getAttribute("update_time");
var name = markers[i].getAttribute("name");
var humidity = markers[i].getAttribute("humidity");
var temperature = markers[i].getAttribute("temperature");
var rain = markers[i].getAttribute("rain");
var wind_dir = markers[i].getAttribute("wind_dir");
var wind_speed = markers[i].getAttribute("wind_speed");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction: " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
if (html[i]!=htmlPrevious[i]){
htmlPrevious[i]=html[i];
infoWindow[i].setContent(html[i]);
google.maps.event.addListener(marker, 'click', function() {
infoWindow[i].set("marker",null);
infoWindow[i].close();
bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
infoWindow[i]=infoWindow;
});
}
//infoWindow.open(map, marker);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
alert("imhere");
});
}
function closeInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'closeclick', function() {
infoWindow.close();
alert("im here");
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 1330px; height: 610px"></div>
</body>
</html>
Any help will highly appreciated.. 🙂
Update your function to be: