jquery - 在页面 : Map invisible although present in HTML 中嵌入谷歌地图

Question

我正在尝试使用 http://code.google.com/p/jquery-ui-map/ 在我的本地开发环境 (WAMP) 中嵌入 Google map .

我已经加载了所有需要的脚本:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_jquery.ui.map.full.min_1.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_myscript_2.js"></script>
<script>
      $('#map_canvas').gmap().bind('init', function(ev, map) {
        $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
            $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
        });
    });
</script>

当然我放了一个空的<div id="map_canvas"></div>在脚本调用之前在我的 HTML 中。

函数已执行，完全没有控制台错误。我在“#map_canvas”中看到了 html，但 map 位于视口(viewport)之外的某个位置，朝向顶部，并且完全不可见。 (似乎是内联 CSS 告诉它绝对定位..)

这是呈现的 HTML:http://pastebin.com/V2cMt4Kr

这是我使用的代码的实际实时链接: http://www.isawu.eu/index.html

Answer 1

我猜你还没有为你的 map 容器放置任何 css 代码。检查我的例子:http://jsfiddle.net/Ywknf/12/

除了最后一个 (#map_canvas3) 之外，所有定位在 CSS 中的 map (内联或非内联)都是可见的

        <div id="map_canvas"></div>
        <div id="map_canvas1"></div>
        <div id="map_canvas2" style="width:400px; height:300px;"></div>
        <div id="map_canvas3"></div> <!--invisible -->

καλή συνέχεια στην προσπìθεια