谷歌地圖不顯示

我有一個谷歌地圖不會顯示。這個問題在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

谷歌地圖不顯示

回答

相關問題