Google maps api 3 谷歌地图API信息盒插件：一次只显示一个信息盒

为了获得定制的信息窗口，我第一次使用了google maps API V3的InfoBox插件。我有谷歌地方API内容打开点击信息框。但是，当我单击一个新标记时，上一个信息框不会关闭。我一次只想打开一个信息框。我试图遵循这个问题的指导：在我自己的代码中。以下是我的代码的相关部分：

 var boxText = document.createElement("div");
 boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";


 var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('') no-repeat"
              ,opacity: 0.75
              ,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
    };

 var ib = new InfoBox(myOptions);
  var request =  {
      reference: place.reference
};
google.maps.event.addListener(marker,'click',function(e){
    service.getDetails(request, function(place, status) {

      if (status == google.maps.places.PlacesServiceStatus.OK) {
        boxText.innerHTML = '<br><div><div style="font-size: 18px; vertical-align:top; border:2px solid; background-color:; color: #555555;"><b>&nbsp;'+place.name+'</b>';
        if (!!place.website) contentStr += '&nbsp;<a target="_blank" href="'+place.website+'"><img src="img/arrow.png" style="position:absolute; bottom:0px: right:0px; height:22px; width:22px;"></img></a></div></div>';
        ib.close(); 
        ib.open(map, marker); 
      } else { 
        var contentStr = "<h5>No Result, status="+status+"</h5>";
        ib.close(); 
        ib.open(map, marker); 
       }
    });

});
gmarkers.push(marker);

var-boxText=document.createElement（“div”）；
boxText.style.cssText=“边框：1px纯黑色；页边距顶部：8px；背景：黄色；填充：5px；”；
变量myOptions={
内容：boxText
，disableAutoPan:false
，最大宽度：0
，pixelOffset:new google.maps.Size（-140,0）
，zIndex:null
，boxStyle:{
背景：“url（“”）不重复”
，不透明度：0.75
，宽度：“280px”
}
，closeBoxMargin:“10px 2px 2px 2px”
，closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
，infoBoxClearance:newgoogle.maps.Size（1,1）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
var ib=新信息框（myOptions）；
var请求={
参考：place.reference
};
google.maps.event.addListener（标记，'click'，函数（e）{
service.getDetails（请求、功能（位置、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
boxText.innerHTML='
'+place.name+''；
如果（！！place.website）contentStr+=''；
ib.close（）；
ib.open（地图、标记）；
}否则{
var contentStr=“无结果，状态=“+status+”；
ib.close（）；
ib.open（地图、标记）；
}
});
});
G标记器。推（标记器）；

---

不幸的是，我一次仍然有多个信息窗口。还有没有其他选项可以设置google API信息窗口的样式，而不需要加载其他脚本？这将在一个移动网站上运行，如果有一种方法只使用CSS3，那将是更好的选择。

我使用这个论坛帖子中的示例解决了这个问题

---

如果我理解正确，您需要将infobox变量置于initialize函数之外，从而使其成为全局变量。在我的例子中，var ib=null；。然后放置ib=newinfobox（{}）；就在初始化函数关闭之前。如何调用函数将取决于您的特定javascript，但请参考示例以获取一些指导。

您还可以显示您在哪里声明了信息框吗？确定的可能重复我添加了附加代码。不是所有代码都在函数createMarker（place）{//代码在这里}