谷歌地图不显示

我有一个谷歌地图不会显示。这个问题在Chrome浏览器中似乎是一样的，但在IE中（甚至是最新版本）甚至更糟糕。谷歌地图不显示

在FF &铬我有一个position: relative; css元素样式的问题。只要我切换到（使用开发工具）position: absolute(or: fixed);在FF中一切都很好显示。在Chrome中，地图只显示高30％（从顶部）。

在IE中，地图甚至没有加载。

以下是<head>的脚本内容。内容仅用于测试，毫无意义。 注：我只用这个来加载地图。这将在稍后交换。

<!-- Script inside <head> tag --> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js? 
     file=api&amp; 
     v=2&amp; 
     key=<?php echo self::GOOGLE_API_KEY; ?>&amp; 
     sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    function initialize() 
    { 
     var startpos = new google.maps.LatLng(50.978056,11.029167); 
     var ops = { 
      zoom:  6 
      ,center: startpos 
      ,mapTypeId: 
       google.maps.MapTypeId.ROADMAP 
       ,tileSize: new google.maps.Size(256, 256) 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), ops); 
     var pos1 = new google.maps.LatLng(50.7510776,12.4820724); 
     var contentString1 = '<div align="left" dir="ltr" class="infowin"><h3>test</h3>testen</div>'; 
     var infowindow1 = new google.maps.InfoWindow({ 
      content: contentString1 
      ,maxWidth: 5 
     }); 
     var marker1 = new google.maps.Marker({ 
      position: pos1 
      ,map:  map 
      ,title: 'test' 
     }); 
     google.maps.event.addListener(
      marker1 
      ,'click' 
      ,function() { 
       infowindow1.open(map, marker1); 
      } 
     ); 
    } 
    </script>

这是页面整个马克起来。

<!-- html markup - There *really* isn't anything else --> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%;"></div> 
</body>

我在谷歌上花了很多时间却没有找到任何东西。有任何想法吗？谢谢！

来源

2011-08-03 kaiser

html, body应该height:100%;。

但要记住，如果你的地图保持元件是另一个元素的子则该元素也应该有height:100%;

否则，设置只包含HTML和身体不会对你有任何好处。

一个例子来说明我的观点：

<html> 
<head> 
    <style> 
     html, body { height:100%; } 
    </style> 
</head> 
<body> 

<div id="wrapper"> 
    <div id="google-map-holder" style="width:100%; height:100%;"></div> 
</div> 

</body> 
</html>

所以，如果你正在做一些像上面。 height:100%;在这里不起作用。

为了使这项工作，你必须做同样的事情，与所有父母的#google-map-holder是一个孩子，在这种情况下，我们将增加height:100%;到#wrapper元素。

IF，该元素#google-map-holder直接的#wrapper元素和body的孩子外直接再只是做html, body就足够了。

来源

2012-05-14 11:31:30 Zubair1

问题是#map_canvas的height: 100%;。

添加到您的<头>，它应该工作（在Firefox 5和Safari 5.1测试）：

<style> 
    html, body { 
    height: 100%; 
    } 
</style>

有关详情为什么这是必要看看这个问题的第一个答案：

Div 100% height works on Firefox but not in IE

来源

2011-08-03 17:55:25

我看了一下我的基本样式表，并认为这已经在那里，但是：不，它不是。感谢您的领导！ +1 – kaiser

谷歌地图不显示

回答

相关问题