Google maps 谷歌地图信息框（信息窗口）位于地图顶部（z索引），Yelp.com工具提示效果

这是一个带有信息框的谷歌地图，我想实现Yelp的地图工具提示div效果换句话说，我想在google地图上放置一个信息框，为了实现这一点，我使用的google地图信息框的z索引高于地图的z索引，但它不起作用，这是JSFIDLE帮助

在本例中，我希望黄色容器位于地图容器的顶部，也位于灰色容器的顶部，这可能吗？。救命啊

代码如下：

CSS:

HTML:

JS:

函数初始化（）{
var secheltLoc=new google.maps.LatLng（49.47216，-123.76307）；
var myMapOptions={
缩放：15
，中心：secheltLoc
，mapTypeId:google.maps.mapTypeId.ROADMAP
};
var theMap=new google.maps.Map（document.getElementById（“Map_canvas”），myMapOptions）；
var marker=new google.maps.marker({
地图：主题地图，
真的，
位置：新google.maps.LatLng（49.47216，-123.76307），
可见：正确
});
var-boxText=document.createElement（“div”）；
boxText.style.cssText=“位置：绝对；边框：1px纯黑色；背景：黄色；填充：5px；z索引：20；高度：100px；宽度：300px；”；
boxText.innerHTML=“加拿大不列颠哥伦比亚省第二市政厅”；
变量myOptions={
内容：boxText
，disableAutoPan:false
，最大宽度：0
，pixelOffset:new google.maps.Size（-140,0）
，zIndex:1
，箱式：{
背景：“url（'tipbox.gif'）不重复”
，不透明度：0.75
，宽度：“280px”
}
，closeBoxMargin:“10px 2px 2px 2px”
，closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
，infoBoxClearance:newgoogle.maps.Size（5,5）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
google.maps.event.addListener（标记“单击”，函数（e）{
ib.open（theMap，this）；
});
var ib=新信息框（myOptions）；
ib.open（地图、标记）；
}
$（文档）.ready（函数（）{
初始化（）；
});

JSFiddle:

谢谢！

---

警察局。我遵循这个infoBox文档示例：

我从Pamela Fox那里找到了这个示例，它正是我想要的

---

我希望这对其他人有所帮助。

我从帕梅拉·福克斯那里找到了这个例子，它正是我想要的

---

我希望它对其他人有所帮助。

链接现在是404:-（链接现在是404:-(

#map_canvas{
    position: absolute;
    top: 50px; left: 20px;
    width: 300px;
    height: 300px;
    z-index: 1;}
#z_index_gray {
     position: absolute;
      top: 250px; left: 250px;
      height: 125px; width: 125px;
      background-color: gray;
      z-index: 10;}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <div id="map_canvas"></div>
<div id="z_index_gray"></div>
    <p>

function initialize() {
                var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

                var myMapOptions = {
                    zoom: 15
                    ,center: secheltLoc
                    ,mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


                var marker = new google.maps.Marker({
                    map: theMap,
                    draggable: true,
                    position: new google.maps.LatLng(49.47216, -123.76307),
                    visible: true
                });

                var boxText = document.createElement("div");
                boxText.style.cssText = "position: absolute;border: 1px solid black;  background: yellow; padding: 5px;z-index: 20;height: 100px; width: 300px;";
                boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

                var myOptions = {
                    content: boxText
                    ,disableAutoPan: false
                    ,maxWidth: 0
                    ,pixelOffset: new google.maps.Size(-140, 0)
                    ,zIndex: 1
                    ,boxStyle: {
                        background: "url('tipbox.gif') 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(5, 5)
                    ,isHidden: false
                    ,pane: "floatPane"
                    ,enableEventPropagation: false
                };

                google.maps.event.addListener(marker, "click", function (e) {
                    ib.open(theMap, this);
                });

                var ib = new InfoBox(myOptions);
                ib.open(theMap, marker);
            }
            $(document).ready(function() {
                initialize();
            });