css - 使用 google-maps 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

我假设您正在使用 Bootstrap 的响应式形式...

您需要为html,body和 .hero-unit元素设置 100% 的高度和宽度。

这是一个jsFiddle。