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

0 Trackbacks zu Google Maps API in Twitter Bootstrap Tabs

Trackback-URL für diesen Eintrag

  1. Keine Trackbacks

0 Kommentare zu Google Maps API in Twitter Bootstrap Tabs

  1. Noch keine Kommentare

Kommentar schreiben

BBCode-Formatierung erlaubt
Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Kommentare werden erst nach redaktioneller Prüfung freigeschaltet!