关闭所有信息窗口Google Maps API V3？

Question

当点击另一个图钉或地图本身时，如何关闭所有信息窗口？我正在使用http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html和一个kml覆盖层。这是我的JS代码：

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

- vimes1984

---

可能是关闭Google Maps API v3中的所有信息窗口的重复问题。 - Nacht

Answer 1

如您在API文档中所见，InfoBox具有close()方法。

将您创建的所有InfoBox收集到一个数组中。然后，当您需要同时关闭它们时，请遍历此数组并为每个infobox调用close方法。

在顶部添加一个数组来保存所有已创建的infobox。

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

在showInContentWindow函数中，在var infowindow=new..之后添加以下代码，例如就在infowindow.open之前。

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

添加此功能

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

这里由链接调用

<a href="#" onclick="closeAllInfoWindows();">Close all infowindows</a>

- davidkonrad

---

但是如果用户通过点击Google地点打开了信息窗口呢？请问该怎么办？ - Fernando Fabreti

非常好的解决方案。谢谢！ - TechyDude

@FernandoFabreti 关于Google Places infoWindows的问题，解决方案在这里：https://stackoverflow.com/a/61310243/4378314 - Kalnode

Answer 2

您还可以将活动（打开的）信息窗口保存在更高的作用域或全局变量中。

var activeInfoWindow;

在点击事件监听器中，关闭活动信息窗口（如果有的话），然后将 this 信息窗口设置为活动窗口

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

google.maps.event.addListener(marker, 'click', function() {
  activeInfoWindow&&activeInfoWindow.close();
  infoWindow.open(map, marker);
  activeInfoWindow = infoWindow;
});

- Daniel Mai

---

如果您一次只打开一个信息窗口，那么这是最佳解决方案。 - stef

Answer 3

如果有人想在gmaps3 jQuery包装器的上下文中执行此操作...

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

- AdamJones