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 <

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