Question

我有一张不会显示的Google地图。 FF＆amp;中的问题似乎是相同的。 Chrome，但在IE中更糟糕“（总是最新版本）。

在FF＆amp; Chrome我的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>

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

Answer 1

html, body应为height:100%;。

但请记住，如果你的地图持有人元素是另一个元素的子元素，那么该元素也应该有height:100%;

否则，只设置html和body对你没有任何帮助。

解释我的观点的一个例子：

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

如果#google-map-holder元素直接位于#wrapper元素之外且body的子元素直接然后只执行html, body就足够了。

Answer 2

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

将此添加到您的＆lt; head＆gt;它应该工作（在Firefox 5和Safari 5.1中测试）：

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

有关详细信息，请查看此问题的第一个答案：

Div 100% height works on Firefox but not in IE

谷歌地图没有显示

2 个答案: