Bootstrap 3.0 и Google maps javascript API V3 styling

Я пытаюсь внедрить API javascript Google Maps v3 на сайт Bootstrap 3.0, который использует базовую тему бутстрапа 3.0 "Карусель".

Проблема заключается в том, что <div id="map-canvas"></div> не будет отображаться на моей странице, если я попытаюсь включить ее внутри любого другого стиля div или bootstrap 3, например внутри <div class="col-xs-6"></div>. Однако он будет отображаться до тех пор, пока он не будет включен в другой div.

Я нашел примечание, рекомендующее это исправление, в котором указывается, что класс google-map-canvas добавляется в div-map-canvas с помощью следующего кода:

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

Я добавил этот код в bootstrap.min.css, а затем изменил div на <div class="google-map-canvas" id="map-canvas"></div>, но canvass все равно не будет отображаться, если я включу его внутри любого другого div, необходимого для стилизации 3 bootstrap.

Мне нужно, чтобы эта карта была расположена в правой половине моей контактной страницы, а контактная форма слева - страницы. Любые предложения о том, как исправить это, оцениваются.

Ниже приведен мой тестовый код:

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>

Ответ 1