Mapy Google nie są wyświetlane

Mam mapę Google, która się nie wyświetla. Problem wydaje się być taki sam w FF & Chrome, ale jeszcze bardziej "zły" w IE (zawsze najnowsza wersja).Mapy Google nie są wyświetlane

W FF & Chrome Mam problem ze stylem elementu css . Jak tylko przejdę do (z narzędziami dev) position: absolute(or: fixed); wszystko wyświetla się dobrze w FF. W Chrome mapa pokazuje tylko górne 30% (od góry).

W IE mapa nie jest nawet ładowana.

Oto treść skryptu z <head>. Treść służy tylko do testowania i nic nie znaczy. Uwaga: używam tego tylko do załadowania mapy. Zostanie to wymienione później.

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

To cały znak się na stronie.

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

Spędziłem dużo czasu w google, nie znajdując niczego. Jakieś pomysły? Dzięki!

Źródło

2011-08-03 kaiser

html, body powinny być height:100%;.

jednak pamiętać, jeśli posiadacz elementem map jest dzieckiem innego elementu wtedy, że element powinien również mieć height:100%;

przeciwnym razie ustawienie tylko html i ciało nie będzie Pan jakieś dobre.

Przykład wyjaśnić mój punkt widzenia:

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

Tak więc, jeśli robisz coś jak wyżej. height:100%; nie będzie tutaj działać.

Aby dokonać tej pracy, trzeba zrobić to samo ze wszystkimi rodzicami że #google-map-holder jest dzieckiem, w tym przypadku chcielibyśmy dodać height:100%; do #wrapper elementem.

IF element #google-map-holder był bezpośrednio na zewnątrz elementu #wrapper i dziecka w body bezpośrednio potem po prostu robi html, body wystarczy.

Źródło

2012-05-14 11:31:30 Zubair1

Problem to height: 100%; z #map_canvas.

Dodaj to do swojej < głowy > i powinno działać (testowane w Firefoksie 5 i Safari 5.1):

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

Aby uzyskać szczegółowe informacje, dlaczego jest to konieczne przyjrzeć się pierwszej odpowiedzi na to pytanie:

Div 100% height works on Firefox but not in IE

Źródło

2011-08-03 17:55:25

Spojrzałem na mój podstawowy arkusz stylów i pomyślałem, że już tam jest, ale: Nie, nie było. Dzięki za heads up! +1 – kaiser

Mapy Google nie są wyświetlane

Odpowiedz

Powiązane problemy