谷歌地圖InfoBox（infowindow）在地圖上（z-index），Yelp.com工具提示效果

Question

這是一個帶InfoBox的谷歌地圖，我想實現Yelp的地圖工具提示div效果。 換句話說，我想要在google地圖之上放置一個infoBox，爲了做到這一點，我使用了一個z-index高於地圖z-index的Google地圖InfoBox，但它不工作，這是的jsfiddle幫助請，

http://jsfiddle.net/MdhzR/

在這個例子中，我想黃容器要在地圖容器的頂部，並在灰色容器上，是可能的？請幫助！

下面是代碼：

CSS：

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

HTML：

<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> 

JS：

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

JSFiddle：http://jsfiddle.net/MdhzR/

謝謝！ PD。我正在關注這個infoBox文檔示例：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Answer 1

我從帕梅拉福克斯發現了這個例子，它正是我想要的。

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html

我希望它可以幫助別人。