Peter Rehm's Blog

apple,development,life & more

Google Maps API in Twitter Bootstrap Tabs

Ohne Kommentare

It is a common request to use the Google Maps API in some a tab.
I came across the issue again today using Twitter Bootstrap. If you
embed the MapCanvas not on the first tab you will notice that the
Map will not be fully loaded...

The issue can be solved with calling
CODE:
    google.maps.event.trigger(map, 'resize');

once the tab on which the map is included is activated.

If you have the following tabs (Example using an tabbed form)
CODE:
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-first" data-toggle="tab"><i class="icon-tasks"></i> Todo</a></li>
    <li><a href="#tab-second" data-toggle="tab"><i class="icofont-leaf"></i> My fancy Map</a></li>
</ul>

<form action="#" method="post" class="form-horizontal tab-content well">
    <fieldset id="tab-first" class="tab-pane active">
        <h2>Form elements to be added here...</h2>
    </fieldset>
    <fieldset id="tab-second" class="tab-pane">
        <div id="mapCanvas" class="span6 pull-right"></div>
        <h2>Fancy Map</h2>
    </fieldset>
</form>


you can handle the resize with the following JavaScript Snippet.

CODE:
    <script type="text/javascript">
        // handler to resize map once the tab content is shown to fix
        // loading and display of the google maps canvas
        $('a[data-toggle="tab"]').on('shown', function (e) {

            // only resize if the tab which contains the map has been shown
            if($(e.target).attr('href') == '#tab-second') {
                google.maps.event.trigger(map, 'resize');
            }
        })
    </script>


I hope this helps you!

Geschrieben von Peter Rehm

22.01.2013 um 18:40:21

Tags für diesen Artikel: , ,