Google Maps does not display on Bootstrap?


I am trying to implement google maps on bootstrap.

I've followed Google's own guide, here:

Whilst this works on a standalone page, when I add the Bootstrap CSS the map doesn't show. I can't seem to find a hack that fixes it.


    <div id="map-canvas"></div>


var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  map = new google.maps.Map(document.getElementById('map-canvas'),

google.maps.event.addDomListener(window, 'load', initialize);

CSS (over bootstrap)

  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;

See here for jsFiddle:

Has anyone encountered this before? I must be missing a basic workaround but no amount of forum searching has helped.


Problem courtesy of: alias51


This doesn't appear to be a Bootstrap issue. For the fiddle you need to use document.ready, and the external resource ""

Also, there is no reference bootstrap in your fiddle. Here is a demo with Google maps and Bootstrap...

Bootstrap + Google Maps

You can see the jQuery document.ready in the JavaScript...

$(document).ready(function() {
 // code here
Solution courtesy of: ZimSystem


I've fixed the issue by changing the height to px. hope it helps

    /*height: 100%;*/
    height: 400px;
Discussion courtesy of: bwaaaaaa

This recipe can be found in it's original form on Stack Over Flow.