Getting Google Maps Javascript API V3 to Run on Bootstrap 3.0

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>

 

Google Map on BootstrapYou 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.