Question

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

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

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

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

执行该功能，完全没有控制台错误。我在“#map_canvas”里面看到了html，但是地图放在视口外面的某个地方，朝向顶部，并且完全不可见。（似乎是内联CSS告诉它绝对定位..）

以下是呈现的HTML：http://pastebin.com/V2cMt4Kr

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

Answer 1

我猜你没有为你的地图容器添加任何css代码。查看我的示例：http://jsfiddle.net/Ywknf/12/

除了最后一个（＃map_canvas3）

之外，所有位于CSS内的地图（内联或非内联）都是可见的

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

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

Answer 2

假设其他一切都是正确的。您可以尝试查找Google Maps容器的主容器（我相信它是一个iFrame），您可以尝试将以下CSS样式从外部样式表应用到它：

#map_canvas > *{margin-top:-200px !important; display:block !important;}

注意：此实例中的 > *符号将从#map_canvas中选择所有子项

这应该会在您的页面上显示。

Answer 3

这不是包含Google Maps API v3的有效方式：

<script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>

你应该删除该行，下面的版本应该可以使用，但是旧的：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

这是目前documented way of including the API

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

在页面中嵌入Google地图：虽然HTML中存在，但仍然是不可见的

3 个答案: