11

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>

Bob Jordan
  • 3,049
  • 2
  • 34
  • 41
  • The CSS syntax doesn't look valid, try `.google-map-canvas,.google-map-canvas * { box-sizing:content-box; }` – omma2289 Aug 28 '13 at 05:44
  • Yes, the code as written by bootstrap devs was also making my pycharm IDE complain, so I modified as above. The change did not fix the rendering issue but it did stop pycharm from complaining. – Bob Jordan Aug 29 '13 at 07:17

1 Answers1

29

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624