2011-08-03 47 views
5

Tôi có Google Map sẽ không hiển thị. Vấn đề dường như giống nhau trong FF & Chrome, nhưng thậm chí nhiều hơn "xấu" trong IE (luôn là phiên bản mới nhất).Google Maps không hiển thị

Trong FF & Chrome Tôi gặp sự cố với kiểu phần tử css position: relative;. Ngay sau khi tôi chuyển sang (với công cụ dev) position: absolute(or: fixed); mọi thứ hiển thị tốt trong FF. Trong Chrome bản đồ chỉ hiển thị trên 30% (từ trên cùng).

Trong IE bản đồ thậm chí không được tải.

Đây là nội dung tập lệnh từ <head>. Nội dung chỉ dành cho thử nghiệm và có nghĩa là không có gì. Lưu ý: Tôi chỉ sử dụng quyền này để tải bản đồ. Điều này sẽ được trao đổi sau.

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

Đây là toàn dấu ấn lên cho trang.

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

Tôi đã dành rất nhiều thời gian trên Google mà không cần tìm bất kỳ thứ gì. Ý tưởng nào? Cảm ơn!

Trả lời

19

html, body nên height:100%;.

Nhưng hãy nhớ, nếu yếu tố giữ bản đồ của bạn là một đứa trẻ của nguyên tố khác thì yếu tố đó cũng nên có height:100%;

Nếu không, chỉ đặt mức html và cơ thể sẽ không làm cho bạn bất kỳ tốt.

Một thí dụ để giải thích quan điểm của tôi:

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

Vì vậy, nếu bạn đang làm một cái gì đó giống như ở trên. height:100%; sẽ không hoạt động ở đây.

Để thực hiện công việc này, bạn phải làm điều tương tự với tất cả phụ huynh rằng #google-map-holder là con của, trong trường hợp này chúng tôi sẽ thêm phần tử height:100%; vào #wrapper.

NẾU yếu tố #google-map-holder nằm ngay bên ngoài phần tử #wrapper và con của số body trực tiếp thì chỉ cần thực hiện html, body là đủ.

2

Sự cố là height: 100%; của #map_canvas.

Thêm phần này vào < đầu > của bạn và nó sẽ hoạt động (thử nghiệm trong Firefox 5 và Safari 5.1):

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

Đối với chi tiết tại sao điều này là cần thiết có một cái nhìn tại các câu trả lời đầu tiên của câu hỏi này:

Div 100% height works on Firefox but not in IE

+0

Tôi đã xem bảng tính cơ bản của tôi và nghĩ rằng điều này đã có trong đó, nhưng: Không, nó không phải là. Cảm ơn cho những người đứng đầu lên! +1 – kaiser

Các vấn đề liên quan