谷歌地图和 Jasny Bootstrap offcanvas

Question

我正在使用the offcanvas in this fiddle 和Google Maps API 来构建这个html：

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

这是我在bootstrap 和jasny-bootstrap 加载后加载的所有css：

 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，我认为是在其他元素下面渲染的，所以我把#map-canvas的z-index改成了：

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

我注意到#map-canvas 的一个孩子.gm-style 有一个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