Getting a full-screen Google map to run on Bootstrap was a bit tricky. Bootstrap 3.0 is a useful CSS framework with standard interface components, cross-browser compatibility, and built-in mobile responsive CSS media queries. Getting a full screen Google Maps Javascript API V3 to work with this framework requires a little bit of unique CSS. The standard javascript to display a Google map can be found at the Google API site.
CSS
Here’s the required CSS.
<style>
body {
padding-top: 50px; /* for nav */
}
html, body {
height: 100%;
width: 100%;
}
#map-canvas {
height: 100%;
width: 100%;
}
.container-map {
width: 100%;
height:100%;
}
</style>
HTML
The <body> of the HTML page will require the standard Google Map canvas <div> for the map, but with a surrounding container. I’m omitting the Bootstrap nav bar used in the <body> of this example.
<body> ... nav bar HTML omitted ... <div class='container-map'> <div id='map-canvas'></div> </div> </body>
You can see from the screen grab on the right this works with the Bootstrap nav bar dropdown, and Google icon markers with an info window. No special z-index was required. This was tested on IE8, and the latest versions of Chrome and Firefox.