- ベストアンサー
JavaScriptで困っています。
- JavaScriptでモーダルを実装するプラグイン「colorbox」を使用してGoogle Mapを表示したいが、一部しか読み込まれない問題に直面しています。
- 非表示になっていたdivが表示になったときに地図を正しく読み込む方法はありますか？
- モーダルを使用してGoogle Mapを表示する際、地図の一部しか読み込まれない問題に対処する方法を教えてください。
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数1
- ありがとう数13
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ＞colorboxで非表示になっていたdivが表示になったときに地図をきちんと ＞読み込まれるようにするにはどのようにすればよいのでしょうか？ なんか誤解がありそうに感じますが・・・ ご提示のHTMLの<div id='inline_content'>の要素をcolorboxで直接に表示/非表示の制御ってできましたっけ？（見た目で同様のものが見えるとかではなく、その要素の表示/非表示） 記憶なので正確ではありませんが、colorboxは表示用のbox（div要素等）を別に設定していて、そちらの内容を書き換えたり、サイズを変更したりしていたと思いますが？ 直接の回答にはならないかもしれませんが、個々の部分に対して・・・ ＞非表示にしていたdivにgooglemapを読み込んでいるので～ それはその通りなのですが、読み込ませるには非表示にする方法を変えれば可能です。 display:noneを用いずに、 ・visibility:hiddenで非表示にする ・リバースマージン等で画面外に表示（見えないので非表示状態） ・他の要素の下に入れて隠す（これも見えない） ・透明度を0にして見えなくする などの方法をとれば、見えない状態でもgoogle mapを読み込むことが可能だったと記憶しています。 ＞～～のあたりも無理な記述になっています。 jQueryを用いているようですので、bodyの中に無理に入れなくても、document readyで実行させればよろしいかと思います。 通常よく用いられている方法ですね。 $(function(){ initialize(); }); colorboxの枠内にmapを表示させるのは少し面倒かも知れません。 一番簡単そうなのは、colorboxの枠を先に表示させてからcolorboxの表示用要素に直接google mapを表示させるという方法でしょうか？ colorbox側にイベント用のフックが用意されているようですので、loadやcompleteのタイミングでmapを表示させるという方法になるかと思います。 ただし、これだと実際に表示されるまでに少しだけ時間がかかる可能性がありますが、表示内容をajaxで読み込む場合と似たようなものと言えるのでは・・・。 全体像がよくわからないので何をなさりたいのかちゃんと把握できてませんが、『リンクをクリックしたらmapがフェードインする』というようなものでしたら、フェードの部分だけ自作してあげればmapを先行して読み込んでおくことも可能と思います。 でも、jQueryのfadeIn/Outをそのまま利用したりすると、非表示時にdisplay:noneになりますので注意が必要かもしれません。
お礼
ありがとうございました。colorbox自体を理解できてませんでした。教えていただいたようにcolorbox側に用意されているcompleteでうまくいきました。