15

How do i get all info windows to close upon clikcing another pin or clicking the map in itself? I'm using http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html and a kml overlay. heres my JS so far:

jQuery(document).ready(function ($) {
    function initialize() {
        google.maps.visualRefresh = true;
        var myLatlng = new google.maps.LatLng(51.201465, -0.30244);
        var mapOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

        var kmlLayer = new google.maps.KmlLayer({
            url: 'http://***.com/new/wp-content/themes/required-starter/CGAGolfAcademies.kml?rand=' + (new Date()).valueOf(),
            suppressInfoWindows: true,
            map: map
        });

        google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
            showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
        });

        function showInContentWindow(position, text) {
            var content = "<div class='info_win'><p>" + text + "</p></div>";
            var infowindow =new InfoBox({
                 content: content,
                 disableAutoPan: false,
                 maxWidth: 0,
                 position: position,
                 pixelOffset: new google.maps.Size(-140, 0),
                 zIndex: null,
                 boxStyle: { 
                  background: "#FBFBFB"
                  ,opacity: 0.90
                  ,width: "280px"
                 },
                 closeBoxMargin: "10px 2px 2px 2px",
                 closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                 infoBoxClearance: new google.maps.Size(1, 1),
                 isHidden: false,
                 pane: "floatPane",
                 enableEventPropagation: false
        });


    infowindow.open(map);

        }
                    /******AJAX MAP ****/
            siteURL = 'http://' + top.location.host.toString();
            coachesLinks = jQuery('.info_win a');
            coachesLinks.click(function (e) {
                e.preventDefault();
            });
            coachesLinks.click(function (e) {
                alert('FRED');
                $el = jQuery(this);
                URL = $el.attr('href');
                shareurl = $el.attr('href');
                URL = URL + " .main";
                jQuery('#content_two').show('slow').load(URL, function () {
                    scrollToAnchor('content_two');
                    $('.main').css('overflow', 'visible');
                    $('#content_two').css('overflow', 'visible');
                    jQuery('#content_two .back').on('click', function () {
                        jQuery(this).hide('slow');
                        var contentTwo = jQuery('#content_two');
                        if (contentTwo.is(':hidden')) {
                            jQuery('#content_two .back').hide();
                        } else {
                            contentTwo.hide('slow');
                            jQuery('#content > .main').show('slow');
                            jQuery('#content > .main').css('overflow', 'visible');
                            scrollToAnchor('access');
                        }
                    });

                });
                $('#content > .main').hide('slow');
            });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
});
1

3 Answers 3

57

As you see in the API docs, an InfoBox has a close()-method.

Collect all the InfoBox'es you create in an array. Then iterate over this array and call close for each infobox, when you need to close them all at once.

In the top, add an array to hold all the infoboxes created

jQuery(document).ready(function ($) {
    var infoWindows = [];

In function showInContentWindow add the following right after var infowindow=new.., eg just before infowindow.open

//add infowindow to array
infoWindows.push(infowindow); 

add this function

function closeAllInfoWindows() {
  for (var i=0;i<infoWindows.length;i++) {
     infoWindows[i].close();
  }
}

here called by a link

<a href="#" onclick="closeAllInfoWindows();">Close all infowindows</a>
3
  • 4
    But what about info windows user May have opened bye clicKing google places? Commented Jun 16, 2015 at 21:34
  • Great solution. Thanks!
    – TechyDude
    Commented Sep 4, 2017 at 20:42
  • @FernandoFabreti for Google Places infoWindows, solution here: stackoverflow.com/a/61310243/4378314
    – Kalnode
    Commented Aug 24, 2022 at 20:24
13

You can also keep your active (opened) info window in a higher scope or global variable

var activeInfoWindow;

and in the click event listener, close the active info window (if there's one), then set this info window as active

var infoWindow = new google.maps.InfoWindow({
  content: name
});

google.maps.event.addListener(marker, 'click', function() {
  activeInfoWindow&&activeInfoWindow.close();
  infoWindow.open(map, marker);
  activeInfoWindow = infoWindow;
});
1
  • 2
    This is the best solution if you only have 1x infowindow open at a time
    – stef
    Commented Jun 3, 2017 at 7:39
1

In case anyone wants to do this in the context of gmaps3 jQuery wrapper...

var infoWindows = [];
var locations=[
    {position:[123,456],content:'<h3>marker title 1</h3><p>msg text</p>/div>'}
]
var map=$('#mapName').gmap3()
.marker(locations)
.infowindow(locations)
.then(function (infowindow) {
    var map = this.get(0);
    var marker = this.get(1);
    marker.forEach(function(item,i){
        item.addListener('click', function() {
            closeAllInfoWindows();
            infowindow[i].open(map, item);
            infoWindows.push(infowindow[i]);
        });
    })
})
.fit();

function closeAllInfoWindows() {
  for (var i=0;i<infoWindows.length;i++) {
     infoWindows[i].close();
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.