Google Maps V3 in hidden div

Question

私はこれを検索しましたが、私が見つけた解決策は私のために働いていないようです。

最終的な目標は、Googleマップv3（デフォルトではこれまでに表示されていない）とクリックされるまで非表示にされるタブの2つのタブを持つことです。

私はタブが動作することができますが、Googleマップは表示されません、私はタブの機能でサイズ変更とセンターを使用しているがまだ動作しません。私はまた、&の高さを100％に設定しました（モバイルデバイス用）。

誰もコードを見て正しい方向に向けることができます、それは非常に感謝しています！最後に、最終的な目標は、ページの読み込み時に地図のタブを表示させてから、ユーザーがクリックしたときにタブが機能して適切なタブが表示されるようにすることです。しかし、この時点で地図のタブには地図が表示されません。

私のコードはhttp://m.lewis-realty.net/map/test2.php?gps_lat=34.43640541614963&gps_lng=-77.5616387038574で見ることができます。

ありがとうございます！

クリス

Answer 1

ない、これが問題を引き起こしているものですが、「functions.js」のライン94には、Javascriptエラーが発生した場合に確認してください - あなたは「もし」の周りに開閉括弧が欠落しています調子。

私は今すぐテストする方法はありませんが、それは価値があります。

Answer 2

マップが含まれているタブを表示するときは、サイズを再計算できるように地図上でresizeイベントをトリガすることを忘れないでください。

google.maps.event.trigger(map, 'resize'); 

Answer 3

私はそのほとんどを理解しました。

は私のコードでは、既にしたマップのサイズ変更に加えて、私は、タブ機能にこれを追加しました：

あなたが選択されているdiv要素のCSSスタイルを変更し

$('div#' + $(this).attr('data-href')).css('{display:block;width:100%;height:100%;}'); 

が、今のマップが正常に動作します。