質問: bootstrapタブ内でgoogleマップが適切にロードされない 私はipropertyを使用して、さまざまなプロパティ所有者向けのコンテンツを含むタブを作成しています。コアファイルを何度もハッキングして、サイトの外観と機能を希望どおりに機能させましたが、タブのマップに問題があります。以下のページを見て、[場所]タブをクリックすると、マップのごく一部しか読み込まれないという問題が発生します。ちなみに、地図タブがアクティブな状態でブラウザのサイズを変更すると問題は解消するので、地図が最初に読み込まれるときに問題があると思います。 http://red-ferndevelopment.co.uk/officeexperts/index.php?option=com_iproperty&view=property&id=90&itemid=318 誰かが助けてくれるなら、私は感謝以上のものになるでしょう。ありがとう、オースティン
回答: ブートストラップタブ(およびカルーセルとモーダル)は、アクティブになるまで最初は何も表示しないように設定されているため、マップの親要素の高さ/幅は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 });