Google maps: infowindow is not closing - google-maps-api-3

Question

My infowindows are not closing automatically when i click on the other marker..
here the code : http://pastebin.com/PvCt2z7W
here is the code for markers with infowindows
for (var n = 0 ; n <listFavourite.length ; n++)
//var favouriteObject =listFavourite[n];
addMarker(listFavourite[n]);
}
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lattitude, data.longitude),
map: map,
title: data.address
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
maxWidth: 10,
});
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
};
i tried all the answers here but not able to work it properly
Any suggestions or help Would be appreciated

Answer 1

Instead of creating one infowindow for each marker, have one global infowindow variable. Then all you're doing in your marker click handler is updating the content for the marker each time. However your code will require this to be done with a closure, otherwise you're going to get each marker having the last marker's content.
var infowindow = new google.maps.InfoWindow({
maxWidth: 10
});
var arrMarkers = [];
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lattitude, data.longitude),
map: map,
title: data.address
});
arrMarkers.push(marker);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
'</div>'+
'</div>';
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, contentString);
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
function clickLink(ID) {
google.maps.event.trigger(arrMarkers[ID], 'click');
}
Your HTML of sidebar links might look like:
Link 1<br>
Link 2<br>
...

Answer 2

The other option to using function closure (which basically involves using a createMarker function) is to save the content of the infowindow in a property of the marker. It still is simplest with a single infowindow. You haven't provided enough context in your pastebin to give you a working example that does that.
Here is an example that uses function closure to associate the infowindow content with the marker and has a single infowindow (translated from Mike Williams' v2 tutorial).
http://www.geocodezip.com/v3_MW_example_map3.html
Mike Williams' description of function closure
Here is an example that doesn't use function closure (it stores the infowindow content in a property of the marker object):
http://www.geocodezip.com/v3_MW_example_map3_noclosure.html