Question

I have an app in which I need the data in the infowindow bubbles to update automatically. I’ve checked around and I see methods for moving markers, updating marker colors, and the like, but nothing with directly updating infowindow content. I am pulling the value necessary (e.g. building[i][7] ) from a hidden DOM element whose content automatically updates, and I need the infowindow’s content to automatically update alongside it.

Here is the code I am using to draw the infowindow bubbles.

infowindow=new google.maps.InfoWindow();
for (i=0;i<buildings.length;i++){
    marker=new google.maps.Marker({
        position:new google.maps.LatLng(buildings[i][4],buildings[i][5]),
        map:map,
        shadow:shadow,
        icon:greenIcon,
        title:buildings[i][0]+" \n"+buildings[i][1],
        zIndex:buildings[i][6]
    });
}
google.maps.event.addListener(marker,'click',(function(marker,i){
    return function(){
        infowindow.setContent(
            '<h2>'+buildings[i][0]+'</h2>'+
            '<p>'+buildings[i][2]+'</p>'+
            '<p>'+buildings[i][7]+'</p>'
        );infowindow.open(map,marker);
    }
})(marker,i));

Any help is greatly appreciated!

Answer 1

There isn’t a built-in way in JavaScript to be notified when the content of a DIV changes, but I believe the jQuery.bind() function or the newer (jQuery v1.7) jQuery.on() function provide a way to implement what you are trying to achieve.