将谷歌地图嵌入到一个页面中：虽然HTML中存在地图，但不能看到

-1

我试图在本地开发环境（WAMP）中使用http://code.google.com/p/jquery-ui-map/嵌入谷歌地图。将谷歌地图嵌入到一个页面中：虽然HTML中存在地图，但不能看到

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

<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，但地图放置在视口之外的某个位置，朝向顶部，并且完全不可见。（似乎是内联CSS告诉它绝对位置..）

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

下面是与我使用的代码的实际活动链接： http://www.isawu.eu/index.html

来源

2013-02-13 George Katsanos

downvoter，请说明。 – 2013-02-16 08:52:56

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

所有被定位CSS（在线与否）内的地图是除了最后一个可见（＃map_canvas3）

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

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

来源

2013-02-13 13:34:30 Theodore

这里有一个实时链接：http://www.isawu.eu/index.html – 2013-02-13 13:43:19

好吧，你需要设置一个高度来工作..谁会想到！ – 2013-02-13 13:46:51

谢谢你是最棒的！对其他人的FYI。 Google提供的默认代码为“height：100％;”。 – 2015-09-25 00:29:03

假设所有其他是正确的。你可以尝试一下了谷歌地图的容器（我相信它的iFrame）的主容器，你可以尝试从外部样式表应用下面的CSS样式它：

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

注意：> *符号在这种情况下，将从#map_canvas中选择所有孩子

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

来源

2013-02-13 13:35:46 AnchovyLegend

好吧，似乎在呈现的HTML中没有iframe。。。 – 2013-02-13 13:42:07

请参阅编辑答案。 – AnchovyLegend 2013-02-13 13:44:00

看来你需要将高度属性添加到容器中。 – 2013-02-13 13:47:27

这是不包括谷歌地图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>

来源

2013-02-13 13:46:34 geocodezip

我知道，我只是复制粘贴呈现的HTML并将其放在静态HTML文件中..所以我可以在这里展示它..因为我在Symfony FW的本地开发 – 2013-02-13 13:48:15

将谷歌地图嵌入到一个页面中：虽然HTML中存在地图，但不能看到

回答

相关问题