2011-08-03 30 views
5

Gösterilmeyecek bir Google Haritanız var. Sorun, FF & Chrome'da aynı gibi görünüyor, ancak IE'de daha da "kötü" (her zaman en son sürüm).Google Haritalar görüntülenmiyor

FF'de & Chrome position: relative; css öğe stili ile ilgili bir sorunum var. (Dev araçlarla) position: absolute(or: fixed);'a geçtiğimde, FF'de her şey iyi görünüyor. Chrome'da harita yalnızca üst% 30'u gösterir (üstten).

IE'de harita yüklenmemiş bile.

<head>'dan gelen komut dosyaları. İçerik sadece test amaçlıdır ve hiçbir şey ifade etmemektedir. Not: Sadece haritayı yüklemek için kullanıyorum. Bu daha sonra değiştirilecek.

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

Bu sayfa için bütün işareti doldu.

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

Hiçbir şey bulamadan google çok fazla zaman harcamak zorunda. Herhangi bir fikir? Teşekkürler!

cevap

19

html, bodyheight:100%; olmalıdır.

Ama harita tutucu eleman size bir yararı olmayacaktır sadece html ve vücudu ayarlama, o eleman da Aksi height:100%;

olmalıdır başka elemanın bir çocuk ise, unutmayın.

Bir Örnek benim açımdan anlatmaya:

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

Yani, yukarıdaki gibi bir şey yapıyorsanız. height:100%; burada çalışmayacak.

Eğer #google-map-holder biz height:100%; eleman #wrapper eklersiniz bu durumda bir çocuk olduğunu ebeveynlerin hepsi ile aynı şeyi yapmak zorunda bu işi yapmak için.

EĞER #google-map-holder eleman doğrudan o zaman sadece html, body yapıyor yeterli olacaktır #wrapper elementi ve body bir çocuğun hemen dışında idi.

2

Sorun #map_canvas'ın height: 100%;'udur.

sizin < kafasına > Bu ekle ve çalışması gerekir (Firefox 5 ve Safari 5.1 test): Bu neden gerekli olduğunu Detayları İçin

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

Bu sorunun ilk cevabı bakabilirsiniz:

Div 100% height works on Firefox but not in IE

+0

Temel stil sayfama bir göz attım ve bunun zaten orada olduğunu düşündüm, ama: Hayır değildi. Başların için teşekkürler! +1 – kaiser

İlgili konular