使用谷歌地圖API與twitter bootstrap有困難與包含實際地圖的div容器上的CSS

Question

地圖將加載得很好，但第二我嘗試設置高度和寬度％它不會顯示，我怎麼能解決這個問題？地圖顯示的唯一方法是，如果我使用px設置它，但是地圖的移動版本全部是不可靠的並且偏移在屏幕的一側。謝謝。

<?php 
    /* Include header and config and set variable*/ 
    require_once('config.inc.php'); 
    require_once($rootdir . $dirsubfolder . 'navbar.php'); 
    $route = $_GET['route']; 
?> 

<?php 
/* User wants to retrieve their route */ 
if (isset($route)) { 
?> 


<?php 
/* User wants Route 1 */ 
if (strcmp($route, "sunroute1") == 0) { 
?> 
<script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 

     function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=asdasd&sensor=true&callback=initialize"; 
     document.body.appendChild(script); 
     } 

    window.onload = loadScript; 
</script> 
<?php 
printf('worked'); 
} else { printf('failed'); } 
?> 


    <div class="container hero-unit"> 
     <div id="map_canvas" style="width: 50%; height: 50%;"></div> 
    </div> 









<?php 
    /* End isset(route) */ 
    } 
    /* Include footer */ 
    require_once($rootdir . $dirsubfolder . 'footer.php'); 
?> 

Answer 1

我假設你正在使用引導程序的響應形式...

你需要設置的高度和寬度爲100％爲您html，body和.hero-unit元素。

這裏是jsFiddle。