谷歌地圖和Jasny引導offcanvas

Question

我使用the offcanvas in this fiddle與Google Maps API一起建立這個網站：

<div class="navmenu navmenu-default navmenu-fixed-left"> 
     <a class="navmenu-brand" href="#">mapErp</a> 
     <ul class="nav navmenu-nav"> 
      <li><a href="#">Slide In</a></li> 
      <li><a href="#">Push</a></li> 
      <li><a href="#">Reveal</a></li> 
      <li><a href="#">Off Canvas Navbar</a></li> 
     </ul> 
     <ul class="nav navmenu-nav"> 
      <li><a href="#">Slide In</a></li> 
      <li><a href="#">Push</a></li> 
      <li><a href="#">Reveal</a></li> 
      <li><a href="#">Off Canvas Navbar</a></li> 
     </ul> 
    </div> 
    <div class="canvas"> 
     <div class="container"> 
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
       <button type="button" class="navbar-toggle navbar-toggle-reveal" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </button> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <a type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
          <span class="sr-only">Toggle Navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </a> 
         <a class="navbar-brand" href="#">mapERP</a> 
        </div> 
        <div class="collapse navbar-collapse navbar-pills" id="navbarCollapse"> 
         <div class="col-md-3 col-sm-3 pull-left"> 
          <form class="navbar-form" role="search" id="search-form"> 
           <div class="input-group"> 
            <input type="text" class="form-control" placeholder="Search" name="geo-search" id="geo-search"> 
             <div class="input-group-btn"> 
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
             </div> 
           </div> 
          </form> 
         </div> 
         <ul class="nav navbar-nav navbar-right clearfix"> 
          <li><a class="navbar-text" id="userName"style="display:none;"></a></li> 
          <li><img class="img-responsive img-circle" id="userImg" 
          src="" style="display:none;"></li> 
          <li><a href="#" class="btn btn-default" id="authorize-button">Login</a></li> 
         </ul> 
        </div>   
       </div> 
      </nav> 
     </div> 
     <div id="map-canvas"></div> 
    </div> 

這是我所有的css加載的bootstrap和jasny-bootstrap後載入：

html, body { 
    height: 100%; 
} 
#map-canvas { 
    z-index:1000; 
} 
body { 
    padding-top:60px; 
} 
.navbar-toggle { 
    float: left; 
    margin-left: 15px; 
} 
a.navbar-toggle { 
    float: right; 
    margin-right: 15px; 
} 
.navmenu { 
    z-index: 1; 
} 
.canvas { 
    position: relative; 
    left: 0; 
    z-index: 2; 
    min-height: 100%; 
    padding: 50px 0 0 0; 
    background: #fff; 
} 
@media (min-width: 0) { 
    .navbar-toggle-reveal { 
     display: block; 
     /* force showing the toggle */ 
    } 
} 
@media (min-width: 992px) { 
    body { 
     padding: 0; 
    } 
    .navbar { 
     right: auto; 
     background: none; 
     border: none; 
    } 
    .canvas { 
     padding: 0; 
    } 
} 
#map img { 
    max-width: none; 
} 
#panel-closer { 
    color:#FFF 
} 
#userImg { 
    margin-right:10px; 
} 
html { 
    height: 100% 
} 
body { 
    height: 100%; 
    margin: 0; 
    padding-top:55px; 
} 
#map-canvas { 
    height:100%; 
} 
/*hardcoded values for displaying in infowindow*/ 
.content { 
    width:435px; 
    height:319px; 
} 
#ma-form label { 
    display:inline-block; 
    text-align:left; 
} 
.gcontainer { 
    width:36px; 
} 
.dropdownOptionsDiv { 
    width:140px; 
} 
.checkboxContainer { 
    width:140px; 
} 

I find that the map loads but is not displayed，我相信它是呈現在其他元素之下，所以我改變了z-index的#map-canvas使用：

#map-canvas{ 
    z-index:1000; 
} 

對於我的JS，假設一個簡單的初始化函數：

function initialize() { 
    var mapOptions = { 
     center: { lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    } 
    //instead of this,I pass a callback to the api script: 
    google.maps.event.addDomListener(window, 'load', initialize); 

我注意到.gm-style的#map-canvas一個孩子得了z-index:0，所以我試圖z-index改變1001這樣的：

$(".gm-style").css("z-index","1001"); 

我也嘗試將#map-canvas移出.canvas,it looked like this。

Also there is the issue of rendering in Firefox。

I have a fiddle with the map but its not working for me

Answer 1

該API將一個元素添加內部#map-canvas具有position: absolute集。這將從地圖流中取出地圖，並將#map-canvas的高度設置爲0px。

將高度加到#map-canvas那不是100%（除非你從父元素開始）並顯示地圖。

#map-canvas { 
    height: 200px; 
} 

例如：http://jsbin.com/tapufoterize/1