Google地图未显示在引导页面中

Question

我正在基于Bootstrap css在网页中嵌入谷歌地图.下面是使用map-canvas的id的代码.

<div class="container-fluid">
        <div class="row" style="height:100%;">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">Overview</a></li>

                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;">

                test
                <div style="height:100%; width:100%;">
                <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                <div id="map-canvas" style="height:100%">s</div>
                </div>

            </div>
        </div>
    </div>

加载页面后,调用javacript函数,该函数获取map-canvas的id并将其替换为从Google检索的映射.问题是地图没有显示,我想这取决于与不同容器的宽度或高度有关的一些问题.我该如何解决？

这是一段javascript

var map;
function initialize() {
    var markers = [];
    var mapOptions = {
        center : new google.maps.LatLng(43.77, 11.24),
        zoom : 4,
        scrollwheel : false,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
    console.log("test");
    console.log(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

[upate]改变如下:

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;">


                <div class="row" style="100px;">
                <div style="height:100%; width:100%;">
                <div id="map-canvas">s</div>
                </div>
                </div>
            </div>
</div>

但它不起作用

Answer 1

地图画布或其父母必须有一个不错的高度.尝试

    <div id="map-canvas" style="height:100px;"></div>

注意px而不是%