How to force popup to close when I click to open an other one?

Question

I have created a simple maps; http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine

If I open a Gîte and a Hotel the popups stays open. If I open a second Gîte popup the first one close itself.

I want all popup to have this behavior. If I click on one item the other popup close itself.

How can I do that ?

The configuration variables:

var googlemap_setting = {
 "gite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=gite",
 "hotel": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=hotel",
 "chambre": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=chambre-hote",
 "camping": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=camping",
 "insolite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=insolite"
}

The javascript that load the maps:

$(document).ready(function() {

function initGoogleMaps() {
    if ($('#map_canvas').length==0) {
        return;
    }

    var myOptions = {
        center : new google.maps.LatLng(47.26804151097223,
                -0.08375246917164172),
        zoom : 9,
        mapTypeId : google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document
            .getElementById("map_canvas"), myOptions);

    var controlDiv = document.createElement('div');

    controlDiv.style.padding = '5px';

    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Filtrer';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = $('#mapscontrol').html();
    $('#mapscontrol').remove();
    controlUI.appendChild(controlText);

    var camping = new google.maps.KmlLayer(
            googlemap_setting["camping"]);
    var gite = new google.maps.KmlLayer(
            googlemap_setting["gite"]);
    var chambre = new google.maps.KmlLayer(
            googlemap_setting["chambre"]);
    var hotel = new google.maps.KmlLayer(
            googlemap_setting["hotel"]);
    var insolite = new google.maps.KmlLayer(
            googlemap_setting["insolite"]);

    camping.setMap(map);
    gite.setMap(map);
    chambre.setMap(map);
    hotel.setMap(map);
    insolite.setMap(map);

    google.maps.event.addDomListener(controlDiv, 'click',
            function(event) {
                var item = event.srcElement;
                if (item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(map);
                    }
                    if (item.value == "gite") {
                        gite.setMap(map);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(map);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(map);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(map);
                    }
                }
                if (!item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(null);
                    }
                    if (item.value == "gite") {
                        gite.setMap(null);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(null);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(null);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(null);
                    }
                }
            });

    map.controls[google.maps.ControlPosition.TOP_RIGHT]
            .push(controlDiv);
}
function initDataTable(){
    datatableconfig = {
            "iDisplayLength" : 20,
            "aaSorting": [[2, "asc"]],
            "oLanguage": {"sUrl": "@@collective.js.datatables.translation"},
            "aLengthMenu" : [ [ 20, 30, 50, -1 ],
                    [ 20, 30, 50, "Tous" ] ]
        };

    var oTable = $('#table-hebergement').dataTable(
            datatableconfig);

    /* ADD COLUMN SEARCH SUPPORT */
    $('#table-hebergement #head-type select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 0);
            });
    $('#table-hebergement #head-capacity select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 1);
            });

}
initGoogleMaps();
initDataTable();
});

Answer 1

It's hard to suggest something without looking at your code but I would just add a class to the outer-most element of your popup window, say .popup , and then I would try closing all .popup elements prior to opening one. Say in jQuery:

$(".popup").hide();