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: , ,

Nächtlicher Spaß mit PEAR::Services_Google

Mit 2 Kommentaren

ich hab was cooles entdeckt :-)

CODE:
require("Services_Google/Google.php");

$key='FxrFp55QFHJv0ccvxxxxxxxxxxxxxxxxxxx';
$test=new Services_Google($key);

echo $test->spellingSuggestion(utf8_encode('tippfheler'));


Das ist eine tolle Funktion bei der man auf die "Vorschlags"-Funktion von
Google zurückgreifen kann. Man braucht nur einen Google Key, aber
den bekommt man dann einfach so.

Man kann bis zu 1000 Anfragen / Tag über die API machen.

Viel Spaß!

Geschrieben von Peter Rehm

22.11.2006 um 23:28:46

Tags für diesen Artikel: , ,

PageRank

Ohne Kommentare

Es ist auch mal ganz interessant zu untersuchen welchen PageRank man gerade hat.
Die PageRank überprüfung ist nur eines der Tools die David Maciejewski auch seiner Seite anbietet.

Viel Spaß beim stöbern in den Tools.

Geschrieben von Peter Rehm

01.06.2006 um 15:30:22

Abgelegt in Verschiedenes

Tags für diesen Artikel:

Luxus oder anders geschrieben: Google

Ohne Kommentare

Google Snackraum

Wer sich das hier ankuckt wird wohl neidisch und wünscht sich auch bei Google zu arbeiten.

Naja, dafür werden wir nicht von den Chinesen zensiert ;-)

Man kann nicht alles haben.

For my english visitors: Its the Google Snack Room. A dream for every developer! :-)

Geschrieben von Peter Rehm

04.02.2006 um 19:27:13

Abgelegt in Verschiedenes

Tags für diesen Artikel: