javascript - 如何在固定位置的 div 中显示谷歌地图？

Question

我正在尝试在我的网页上放置一个固定位置的地图。我在下面放了一段 index.html 文件。我有一个divwithid="map-mini"下一个divwith class="map-container"。

我将地图容器的位置定义为固定的（post.css 文件在文件末尾给出）。

我使用 post.js 中给出的函数初始化地图。但是，当我刷新网页时，地图未初始化。

你有什么建议可以解决我的问题吗？

给定代码的jsfiddle如下：http: //jsfiddle.net/N2V8S/2/

问候。

索引.html：

<div class="container-fluid">
<div class="row-fluid">
    <div class="span2">
        <div class="map-container">
            <div id="map-mini"> </div>
        </div>
    </div>
    <div class="span8">
        <div id="post">
            <div class="body"></div>
        </div>
    </div>
</div>

post.js：

$(document).ready(function() {

var map_id  = '#map-mini';
var lat     = 41.04207384890103;
var lng     = 29.0972900390625;
var zoom    = 11;
var myOptions = {
    zoom : zoom,
    center : new google.maps.LatLng(lat, lng),
    mapTypeId : google.maps.MapTypeId.ROADMAP
};

var map  = new google.maps.Map(document.getElementById("map-mini"), myOptions);
});

post.css：

.map-container{
position: fixed;
border: solid gray 1px;
width: 17%;
height: 80%;
top: 50px;
left: 0.5%;
}