info window on google maps v3 does not close

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);

    });

});

})

If you only want one infowindow, only create one and share it among your markers. Possible duplicate of [Google Map V3 - Allow only one infobox to be displayed at a time](http://stackoverflow.com/questions/10908132/google-map-v3-allow-only-one-infobox-to-be-displayed-at-a-time) and many others. — geocodezip, May 10 '15 at 03:01
possible duplicate of [close InfoWindow before open another](http://stackoverflow.com/questions/14321808/close-infowindow-before-open-another) — geocodezip, May 10 '15 at 03:02
possible duplicate of [Auto close InfoWindow in googlemap](http://stackoverflow.com/questions/28138468/auto-close-infowindow-in-googlemap) — geocodezip, May 10 '15 at 03:03

score 0 · Answer 1 · answered May 11 '15 at 00:33

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);
                });
            }

info window on google maps v3 does not close

1 Answers1