Bootstrap 3.0 and Google maps javascript API V3 styling

Question

I'm trying to implement a google maps javascript API v3 into a Bootstrap 3.0 website that is leveraging the bootstrap 3.0 "carousel" base theme.

The problem is the <div id="map-canvas"></div> will not render on my page if I try to include it inside of any other div or bootstrap 3 styling, such as inside <div class="col-xs-6"></div>. However, it will render so long as it is not included inside another div.

I have found a note that recommends this fix which instructs to add a google-map-canvas class to the map-canvas div using the following code:

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

I've added this code to bootstrap.min.css and then changed the div to <div class="google-map-canvas" id="map-canvas"></div> but the canvass will still not render if I include it inside of any other div required for bootstrap 3 styling.

I need this map to be positioned on the right half of my contact page, with the contact form on the left have of the page. Any suggestions on how to fix this is appreciated.

Below is my test code:

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

Answer 1

Since the map-canvas is contained within several other containers (html,body,row,col-xs-6), you need the either set it's height in pixels..

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

.. or set all of the map-canvas containers to height:100%..

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

You could specify an id in the .row that contains the map-canvas, and then use this for CSS specificity...

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

Here's a working example on Bootply: http://bootply.com/77513