css - 在包含实际 map 的 div 容器上使用带有 CSS 的 twitter bootstrap 的 google-maps API

Question

map 可以正常加载，但第二次我尝试设置高度和宽度 % 它不会显示，我该如何解决这个问题？ map 显示的唯一方式是如果我用 px 设置它，但是 map 的移动版本在屏幕的一侧都是不稳定的和偏移的。谢谢。

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