Javascript 谷歌地图信息窗口，全屏透明覆盖

我正在努力创建一个全屏半透明覆盖，当谷歌地图上的信息窗口打开时，它应该显示出来（以使地图变暗）

html：

<div id="infobox_wrapper">
<div id="map_overlay">
<div id="infobox">
<div id="marker1">
<div id="infobox_title_wrapper">
<div id="info_icon_stream">
<img src="green_s.png"/>
</div>
<div id="info_title"><p>##</p>
</div>
</div>
<iframe width="800" height="450" src="##" frameborder="0" allowfullscreen></iframe>
<p class= "txt">##</p>
</div> 
</div>
</div>
</div>

jQuery：

var infobox = new InfoBox({
     content: document.getElementById('map_overlay'),
     disableAutoPan: false,
     maxWidth: 2880,
     pixelOffset: new google.maps.Size(-400, 10),
     zIndex: null,
    closeBoxMargin: "12px 12px 2px 2px",
    closeBoxURL: "icon-close.png",
    infoBoxClearance: new google.maps.Size(0, 0),
});

google.maps.event.addListener(marker1, 'click', function() {
    infobox.open(map, this);
    map.panTo(marker1.getPosition(0, 427));
    map.panBy(0, 390);
});

我尝试了所有不同的组合，但除了让所有东西都是半透明的，包括信息窗口和混乱的布局。或者，单击标记时信息窗口不会打开。 我认为最好将“map_overlay”div放在最底部，在最后一个结束div之前，但是没有选项使用“getElementById”调用该div。。。

---

非常感谢。

你能分享一把小提琴吗？请在这里分享一把小提琴来演示这个问题。。

var infobox = new InfoBox({
     content: document.getElementById('map_overlay'),
     disableAutoPan: false,
     maxWidth: 2880,
     pixelOffset: new google.maps.Size(-400, 10),
     zIndex: null,
    closeBoxMargin: "12px 12px 2px 2px",
    closeBoxURL: "icon-close.png",
    infoBoxClearance: new google.maps.Size(0, 0),
});

google.maps.event.addListener(marker1, 'click', function() {
    infobox.open(map, this);
    map.panTo(marker1.getPosition(0, 427));
    map.panBy(0, 390);
});