Bootstrap 3.0 和 Google 地图 javascript API V3 样式

我正在尝试将谷歌地图 javascript API v3 实现到利用 Bootstrap 3.0“轮播”基本主题的 Bootstrap 3.0 网站中。

问题是<div id="map-canvas"></div>如果我尝试将其包含在任何其他 div 或 bootstrap 3 样式中（例如内部），则不会在我的页面上呈现<div class="col-xs-6"></div>。但是，只要它不包含在另一个 div 中，它就会呈现。

我已经发现推荐此修复的注释 https://f.cloud.github.com/assets/98681/921490/95ff7c92-fefa-11e2-9fdd-cd1bf4f908c6.png它指示使用以下代码将 google-map-canvas 类添加到 map-canvas div：

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }

我已将此代码添加到 bootstrap.min.css 中，然后将 div 更改为<div class="google-map-canvas" id="map-canvas"></div>但如果我将画布包含在 Bootstrap 3 样式所需的任何其他 div 中，画布仍然不会渲染。

我需要将此地图放置在联系页面的右半部分，而联系表单位于页面的左侧。任何有关如何解决此问题的建议都将受到赞赏。

下面是我的测试代码：

JAVASCRIPT（在“base.html”上）：

{% if on_contactpage %}
   <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
   </style>
     <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">
     </script>
     <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);
          }
          google.maps.event.addDomListener(window, 'load', initialize);
     </script>
{% endif %}

HTML:

<div class="row">

    <div class="col-xs-6">

        <h2> contact form goes here</h2>

    </div>

      <div class="col-xs-6">

            <div class="google-map-canvas" id="map-canvas">
            </div>

        <div class="col-xs-6">
            <h2>Hong Kong</h2>
            <address>
                <strong>HK Business Address</strong><br>
                100 Business Address<br>
                Kowloon<br>
                Hong Kong<br>
                Hong Kong<br>
                Zip Code N/A<br>
                <abbr title="Phone">P:</abbr> 01234 567 890
            </address>
        </div>

        <div class="col-xs-6">


          <h2>Shenzhen, P.R.C.</h2>
            <address>
                <strong>SZ Business Address</strong><br>
                100 Business Address<br>
                Futian District<br>
                <br>
                Shenzhen, Guangdong<br>
                518000<br>
                <abbr title="Phone">P:</abbr> 01234 567 890
            </address>
        </div>
      </div>

</div>

自从map-canvas包含在其他几个容器（html、body、row、col-xs-6）中，您需要设置其高度（以像素为单位）。

#map-canvas {
    width:100%;
    height:500px;
}

..或设置所有map-canvas容器到height:100%..

html, body, .row, .col-xs-6 { height: 100% }

您可以在包含以下内容的 .row 中指定一个 idmap-canvas，然后将其用于 CSS 特异性......

html, body, #myrowid, #myrowid .col-xs-6 { height: 100% }

这是 Bootply 上的一个工作示例：http://bootply.com/77513 http://bootply.com/77513