Embedded Google map appearing as mostly grey

Question

I have followed this tutorial (https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map) to embed a map using the google maps API onto my page. The map in question is embedded within a Twitter Bootstrap tabbed content item as shown below:

As you can see from the image above, the map fails to display correctly and is largely made up of a grey background. Why is this and what can I do to fix this? Please see my code below:

HTML

    <div class="tab-wrapper">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#hotel-overview" data-toggle="tab">Overview</a></li>
            <li><a href="#hotel-rating" data-toggle="tab">Rating</a></li>
            <li><a href="#hotel-features" data-toggle="tab">Features</a></li>
            <li><a href="#hotel-gallery" data-toggle="tab">Gallery</a></li>
            <li><a href="#hotel-holidays" data-toggle="tab">Holidays</a></li>
            <li><a href="#hotel-map" data-toggle="tab">Map</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="hotel-overview">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-holidays">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-rating">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-features">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-gallery">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-map">
                <div id="google-map"></div>
            </div>
        </div>
    </div>

CSS

#google-map{
  width: 100%;
  height: 200px;
}

JAVASCRIPT

    $(document).ready(function () {
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            // Avoid following the href location when clicking
            event.preventDefault();
            // Avoid having the menu to close when clicking
            event.stopPropagation();
            // If a menu is already open we close it
            $(this).parent('.dropdown-submenu').find('ul.dropdown-menu').toggleClass('open');
        });

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

    })

    function initialize() {
        var map_canvas = document.getElementById('google-map');
        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
    }

I have already ran several Google searches to identify a solution to this issue and everything I have seen recommends adding the following to my document.ready:

            $(window).resize(function() {
            google.maps.event.trigger('google-map', 'resize');
        });

        google.maps.event.trigger('google-map', 'resize');

However, I have tried this and unfortunately it makes no difference.

Any help would be greatly appreciated.

NB. I have managed to put together a fiddle demonstrating the issue:

http://jsfiddle.net/jezzipin/J7ePY/1/

Answer 1

It appears that Maps must render in an element that has dimensions. Because I am using tabs and the Maps tab is hidden by default on page load, all elements inside the tab have no dimensions while their parent is hidden. Therefore the map does not know how to render correctly. To fix this, we need to resize the map once the map tab is clicked. I amended my Javascript file to the following:

    $(document).ready(function () {
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            // Avoid following the href location when clicking
            event.preventDefault();
            // Avoid having the menu to close when clicking
            event.stopPropagation();
            // If a menu is already open we close it
            $(this).parent('.dropdown-submenu').find('ul.dropdown-menu').toggleClass('open');
        });

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

        $('a[href=#hotel-map]').on('click', function() {
            setTimeout(function(){
                initialize();
            }, 50);
        });         
    })

    function initialize() {
        var map_canvas = document.getElementById('google-map');
        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(map_canvas, map_options);

    }

This workaround only initializes the map when the map container is active meaning it has dimensions to work with. I will now refine this to only run the first time the tab is clicked.

Final fiddle can be found here:

http://jsfiddle.net/jezzipin/J7ePY/6/