使用谷歌地图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。