web-dev-qa-db-ja.com

Bootstrapタブ内でGoogleマップが適切にロードされない

私はiPropertyを使用して、さまざまなプロパティ所有者向けのコンテンツを含むタブを作成しています。

コアファイルを何度もハッキングして、サイトの外観と機能を希望どおりに機能させましたが、タブのマップに問題があります。

以下のページを見て、[場所]タブをクリックすると、マップのごく一部しか読み込まれないという問題が発生します。ちなみに、地図タブがアクティブな状態でブラウザのサイズを変更すると問題は解消するので、地図が最初に読み込まれるときに問題があると思います。

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

誰かが助けてくれるなら、私は感謝以上のものになるでしょう。

ありがとう、オースティン

developmentjquery
2
Austin

最初にサイズ変更を修正する理由は、ブラウザのサイズ変更ですべてが「正しい」ことをマップがチェックするためです。タブはデフォルトで非表示になっているため、タブが開かれるまでマップのサイズは小さくなりますが、変更を通知するイベントがマップに送信されません。私は以前にグーグルマップで同様の問題を見たことがありますが、それは実際には問題ではなく、簡単に見逃される可能性があるものです。

そのための修正がいくつかあります。最初の修正は、タブが開かれたときにmap.checkResize()を呼び出すことです。与えられたのは簡単ではないかもしれないサードパーティのコンポーネントですが、コアの変更が既に行われている場合、それは問題ではないかもしれません。 mapをマップの実際の変数に置き換えます。

実際に触れることなくそれを「だます」ための2番目の簡単な方法は、次のようにすることです。

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

DOMがロードされた後であればどこにでも配置でき、修正する必要があります。タブをクリックすると、サイズ変更イベントが自動的にトリガーされるため、手動でサイズ変更せずにマップを強制的に機能させる必要があります。

最初の提案はどのような種類の「ハック」でもないので最良ですが、2番目の提案は何があっても機能するはずです。

5
Jordan Ramstad

ブートストラップタブ（およびカルーセルとモーダル）は、アクティブになるまで最初は何も表示しないように設定されているため、マップの親要素の高さ/幅は0です。

これを解決する最良の方法は、マップスクリプトを呼び出すことですafterドキュメントの準備ができていないタブが表示されました。ドキュメントの準備ができたら、ブラウザに関する限り、マップをロードする必要はありません。

Bootstrapは、showned.bs.tabイベントでこれを行うメソッドを提供します http://getbootstrap.com/javascript/#tabs

したがって、マップをインスタンス化する次のようなものが必要ですafterタブの表示が終了しました：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});
2
Seth Warburton

Seth Warburtonは次のように書いています：Bootstrapタブ（およびカルーセルとモーダル）は、アクティブになるまで何も表示しないように初期設定されているため、マップの親要素の高さ/幅は0です。

Bootstrap3にも同じ問題がありました。ようやく、簡単なCSSソリューションが完成しました。

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}
1
ND_

このcss宣言を追加して、Bootstrap/Googleマップの競合を防ぐことができます（マップのIDが#mapの場合）。いくつかのケースでは、それは問題を解決します：

#map img {
    max-width: none;
}

ただし、タブが表示されている場合にのみマップスクリプトをロードする必要があります。

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

これが役立つことを願っています！

0
Cyril