css タブ形式で表示される 2 つのマップが必要です。私が抱えている問題は、2 番目の「非表示」マップがロードされていないようで、タブ領域の左上隅に表示されることです。
タブがクリックされたときに両方のマップがロードされるか、少なくともロードされるようにコードを修正する方法はありますか? フィドルはこちら
Google Chrome がコンソールにエラーをスローします。
Unsafe JavaScript attempt to access frame with URL http://jsfiddle.net/xzer6/1/ from frame with URL http://maps.google.co.uk/maps?
ここでスタックオーバーフローには、その問題に関するいくつかの質問がありますが、解決策はありません。私もそれに対する解決策を見つけていません。
Google マップが親フレーム (ページ) にアクセスしようとしているようですが、これは許可されていません。唯一の回避策は、Google Maps API を使用することです。
visibility
CSS 属性の代わりに をトリガーするdisplay
と、マップが DOM にアタッチされ、ロード時に (2 番目のマップが表示されていない間) レンダリングされ、期待どおりの動作が得られます。
コードを少し調整しました: http://jsfiddle.net/73hZa/