info window on google maps v3 does not close - google-maps

Question

I have create Map that shows several markers with info window. The goal is to have the info window to close upon clicking on a different one, but that is not happening. I am not sure why. Any help is appreciated. thank you
(document).ready(function(){
//GLOBAL VARIABLE
var jobsListings='';
var mapOptions;
var lng='';
var lat='';
var infowindow;
var Outerarray = [];
$('#SearchJobs').click(function(){
$("#JobsListingRender").html('<img src="images/preloader.gif" width=40>Searching for jobs. please wait....');
var htmldiv='';
var ZipCode = $('#ZipCode').val();
var lng='';
var lat='';
$.ajax({
datatype:"json",
url: "https://maps.googleapis.com/maps/api/geocode/json?address="+ZipCode,
async:false,
success:
function(data){
lng= data.results[0].geometry.location.lng;
lat= data.results[0].geometry.location.lat;
//var map = new google.maps.Map(document.getElementById('map-canvas'),
// mapOptions);
//setMarkers(map,zip,l);
}
})
var bounds = new google.maps.LatLngBounds();
$.get("proxy.php?Zip="+ZipCode, function(data, status){
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var data = jQuery.parseJSON(data);
//console.log(jobsListings.Results);
MarkersArray= [];
$.each(data.results, function(i, val) {
//var myLatLng = new google.maps.LatLng(Outerarray[i][1],Outerarray[i][2]);
if(typeof val.Company !=='object')
{
htmldiv +="<div><strong>Company Name:</strong>"+val.company+"</div>";
htmldiv +="<div><strong>Title:</strong>"+val.jobtitle+"</div>";
htmldiv +="<div><strong>City:</strong>"+val.city+"</div>";
htmldiv +="<div><strong>Location:</strong>"+val.formattedLocation+"</div>";
htmldiv +="<div><strong>Pay:</strong>"+val.Pay+"</div>";
htmldiv +="<button class='btn btn-primary'>Details</button>";
htmldiv +="<button class='btn btn-info pull-right'>Apply on Site</button>";
htmldiv +="<hr>";
}
MarkersArray= new Array();
MarkersArray[0] = val.latitude;
MarkersArray[1] = val.longitude;
MarkersArray[2] = val.company; //company name
MarkersArray[3] = i; //index
MarkersArray[4] = val.jobtitle; //jobtitle
MarkersArray[5] = val.formattedLocation; //location
MarkersArray[6] = val.city; //location
Outerarray.push(MarkersArray);
});
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (x = 0; x < Outerarray.length; x++) {
var marker, i;
var infow='';
infow ="<div><strong>Company Name:</strong>"+Outerarray[x][2]+"</div>";
infow +="<div><strong>Title:</strong>"+Outerarray[x][4]+"</div>";
infow +="<div><strong>City:</strong>"+Outerarray[x][6]+"</div>";
infow +="<div><strong>Location:</strong>"+Outerarray[x][5]+"</div>";
infow +="<button class='btn btn-primary'>Details</button>";
infowindow = new google.maps.InfoWindow({
content:infow
});
console.log(Outerarray[x]);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Outerarray[x][0], Outerarray[x][1], Outerarray[x][3]),
map: map,
icon:"images/eye_icon_blue.png",
id:x
});
//bindInfoWindow(marker, map, infowindow, infow);
bindInfoWindow(marker, map, infowindow, infow,i)
}
function bindInfoWindow(marker, map, infowindow, description) {
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow.setContent(description);
infowindow.open(map, marker);
});
}
$("#JobsListingRender").html('');
$("#JobsListingRender").html(htmldiv);
});
});
})

Answer 1

i solved by cresting a local variable iWindow:
function bindInfoWindow(marker, map, description) {
iWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (iWindow) {
iWindow.close();
}
iWindow.setContent(description);
iWindow.open(map, marker);
});
}