jquery - 关闭所有其他窗口并保留当前的信息框谷歌地图

Question

请原谅我的英语，我说西类牙语，

我的问题是，我如何才能只单击一个信息框并关闭其他信息框，如果您选择另一个信息框，它会打开该信息框并关闭其他信息框。

这意味着当您点击其中一个时，它是唯一打开的一个

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
    function initialize() {
        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307),
             markers,
                myMapOptions = {
                 zoom: 13,
                center: secheltLoc,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

        function initMarkers(map, markerData) {
            var newMarkers = [],
                marker;

            for(var i=0; i<markerData.length; i++) {
                marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    position: markerData[i].latLng,
                    visible: true
                }),
                boxText = document.createElement("div"),
                infoboxOptions = {
                     content: boxText,
                    disableAutoPan: false,
                    maxWidth: 0,
                    pixelOffset: new google.maps.Size(-60, -180),
                    zIndex: null,
                    boxStyle: {
                        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                        opacity: 0.75,
                        width: "280px"
                    },
                    closeBoxMargin: "0",
                    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                    infoBoxClearance: new google.maps.Size(1, 1),
                    isHidden: false,
                    pane: "floatPane",
                    enableEventPropagation: false
                };

                newMarkers.push(marker);
                boxText.style.cssText = "";
                boxText.innerHTML = "<div class='mapoverlay'><h5><a href=''>" + markerData[i].address + "</a></h5><p>" + markerData[i].state + "<br /><a href=''>more info</a> <span class='orange'>|</span> <a href=''>get directions</a></p></div>";
                newMarkers[i].infobox = new InfoBox(infoboxOptions);
                newMarkers[i].infobox.open(map, marker);
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        newMarkers[i].infobox.open(map, this);
                        map.panTo(markerData[i].latLng);
                    }
                })(marker, i));
            }

            return newMarkers;
        }

        markers = initMarkers(map, [
            { latLng: new google.maps.LatLng(42.59538, -114.45641), address: "TWIN FALLS", state: "1921 Blue Lakes Blvd. North <br />208-734-4833" },
            { latLng: new google.maps.LatLng(49.47420, -123.75703), address: "TWIN FALLS", state: "1921 Blue Lakes Blvd. North <br />208-734-4833" },
            { latLng: new google.maps.LatLng(49.47530, -123.78040), address: "TWIN FALLS", state: "1921 Blue Lakes Blvd. North <br />208-734-4833" }
        ]);
    }
</script>
<div id="map_canvas" style="width: 670px;height: 465px;"></div>

Answer 1

创建标记后添加以下内容

// add a click listener to the marker
google.maps.event.addListener(marker, 'click', function() {
    // reference clicked marker
    var curMarker =  this;
    // loop through all markers
    $.each(markers, function(index, marker) {
        // if marker is not the clicked marker, close the marker
        if(marker !== curMarker) {
            marker.infobox.close();
        }
    });
  });

我在这里创建了一个 fiddle 示例 http://jsfiddle.net/pimlinders/rjmg8/4/