0

Google マップを jQuery タブに読み込む際に問題があります。ここからの提案を使用して、インターネットからすべてのソリューションを試しました: Google マップ V3 が jQuery タブで読み込まれない

Google Maps API v3 + jQuery UI タブの問題

http://www.digitalwks.com/blogs/diogo-raminhos/google-maps-v3-and-jquery-tabs-jquery-tabs-google-maps-bug/

Google マップと jQuery タブ

等々...

しかし、それらのどれも機能しませんでした。私はそれらを使用するにはあまりにも初心者であり、それらを追加する方法がわからないか、機能していません。

タブは次のように表示されます。

<div class="tabprice">

    <ul class="tabnavig">      
      <?php if ( $gmap_active ) { ?>
          <li><a href="#block2"><span class="big"><?php _e('Map', 'anuncios') ?></span></a></li>
      <?php } ?>
    </ul>

<?php if ( $gmap_active ) { ?>

    <!-- tab 2 -->
    <div id="block2">

        <div class="clr"></div>

            <div class="singletab">

                <?php include_once ( TEMPLATEPATH . '/includes/sidebar-gmap.php' ); ?>

            </div><!-- /singletab -->

    </div>

<?php } ?>

そして、これがsidebar-gmap.phpの内容です

http://pastebin.com/H3i4J8EN

みんなお願いします、助けてください！

4

3 に答える 3

4

私はあなたが参照したブログ投稿の1つの著者です。

同じ問題を抱えている他の人の場合：ここでの問題は、ショーのアニメーションが終了したときにサイズ変更イベントをトリガーする必要があるという事実に依存しています。

これを行うには、 google.maps.event.trigger(map, "resize"); アニメーションの終了コールバックを呼び出します。

したがって、あなたの場合（送信したリンクの場合）、次のことを行う必要があります。

次のファイルを編集します。

/wp-content/themes/anuncios/includes/js/theme-scripts.js

そしてこれを置き換えます：

/* Tab Control home main */
jQuery(function($) {
    var tabContainers = $('div.tabcontrol > div');
    tabContainers.hide().filter(':first').show();
    $('div.tabcontrol ul.tabnavig a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(100);
        $('div.tabcontrol ul.tabnavig a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

これとともに：

/* Tab Control home main */
jQuery(function($) {
    var tabContainers = $('div.tabcontrol > div');
    tabContainers.hide().filter(':first').show();
    $('div.tabcontrol ul.tabnavig a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(100, function(){
            if(map != undefined && map != null)
                google.maps.event.trigger(map, "resize");
        });
        $('div.tabcontrol ul.tabnavig a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

パート2

次のコードを見つけます。

$(tabs).click(function() {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).fadeIn(500);
    $(tabs).removeClass('selected');
    $(this).addClass('selected');
    return false;
});

そしてそれを

$(tabs).click(function() {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).fadeIn(500, function(){
        if(map != undefined && map != null)
            google.maps.event.trigger(map, "resize");
    });
    $(tabs).removeClass('selected');
    $(this).addClass('selected');
    return false;
});

そして、あなたのバグは修正されます。今回はローカルでダウンロードしてテストしたので、100％確実に機能します。

于 2012-08-06T10:14:35.717 に答える