Estoy intentando implementar una API v3 javascript de google maps en un sitio web Bootstrap 3.0 que aproveche el tema base "carrusel" de bootstrap 3.0.

El problema es el<div id="map-canvas"></div> no se mostrará en mi página si intento incluirlo dentro de cualquier otro estilo div o bootstrap 3, como el interior<div class="col-xs-6"></div>. Sin embargo, se procesará siempre que no esté incluido dentro de otra div.

he encontradouna nota que recomienda esta corrección que indica agregar una clase de google-map-canvas a la división map-canvas usando el siguiente código:

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

He agregado este código a bootstrap.min.css y luego cambié el div a<div class="google-map-canvas" id="map-canvas"></div> pero el escrutinio aún no se procesará si lo incluyo dentro de cualquier otro div requerido para el estilo bootstrap 3.

Necesito que este mapa se coloque en la mitad derecha de mi página de contacto, con el formulario de contacto en la parte izquierda de la página. Cualquier sugerencia sobre cómo solucionar este problema se agradece.

A continuación se muestra mi código de prueba:

JAVASCRIPT (en "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>