Coda-Sliderでgooglemap表示不可

質問

jQueryのCode Slider 3.0 ( http://kevinbatdorf.github.com/codaslider/ ) で
横スライド型のWEBサイトを作成しております。
当該スライドパネルの内部にgooglemap V3を表示したいのですが、どうしても表示できません。

やりたいことは、スライドパネルにgooglemap v3を表示させたいだけです。
autoHeightはtrueです。

自分で調べたところによると、どうやらgooglemapはスライドされる前（隠れている状態「display:none;的な?」）はdivの縦横サイズが確定されていないため、googlemap表示の前提条件であるdiv id="map_canvas"のサイズの確定がなされないから・・・ということのような気がするのですが、結局どうしたらよいかわかりません。

/***********
おそらく類似の問題に、jQuery UI Tabsにてgooglemapが表示できない場合に、CSSにて
display:none;の部分を以下のように変更すれば良いという見たことがあるのですが

.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}

Code Slider 3.0のCSSにはそもそもdisplay:none;のような部分が見当たりません。
***********/

どうしたら良いでしょうか。解決方法のご教授をお願いいたします。

回答No.2

fujillin · ベストアンサー

#1です。

＞やはり一からjsソースを読んでみる必要があるようですね。
すぐにそこに行かなくても、方法はいろいろ考えられるのではないでしょうか。
autoHeightって親要素の高さにスライド部分の高さを合わせるっていうオプションですよね？

とりあえず、ＣＳＳで高さを決め打ちの設定をしてみれば、それが原因なのかがわかるでしょう。
静的に高さが決まっているのならそのままで良いでしょうし、動的に高さが決まるのであれば、Sliderにその処理をまかせないで、mapを読込む前にスクリプトで設定するようにしてあげればよいのではないでしょうか。

いずれにしろ、jQueryを使用しているのでしょうから、2、3行で済むのではないかと思いますが…

お礼

解決いたしました！
アルゴリズムはもはやわからないのですが、スクリプト内のオプションで

continuous:false

を指定するだけでした。
なぜ解決したかというと、片言の日本語で製作者様に突撃した結果、製作者もよくわからないということで、お互い試行錯誤しあったのち、なんとなくできたという感じです。

でも#1さんのお言葉のおかげでもっと頑張って勉強しようという意欲がわきました！ありがとうございました！

回答No.1

fujillin

mapについて以前調べてみましたが、visibility:hiddenやz-indexを小さくしたり、位置を表示外にして見えないようにした場合は問題なく表示できていたように記憶しています。（おぼろげな記憶ですが）
display:noneの場合は、ご指摘のようにダメでした。

＞Code Slider 3.0のCSSにはそもそもdisplay:none;のような部分が見当たりません。
＞autoHeightはtrueです。
display:noneになっていなくても、表示要素の高さが設定されていなければ（高さ0と見做される場合）、mapは表示できないと想像されます。
表示要素への高さ設定と、map表示の処理の順序が逆になっていないかを確認なさってみてください。

お礼

ご回答ありがとうございます。
なるほど表示の高さが設定されていることがやはり前提なのですね。やはり一からjsソースを読んでみる必要があるようですね。

合っているのかわかりませんが、
リンクをクリックしてから、びよーっとアニメーションで画面が縦方向に伸びていることから、伸び終わってから（アニメーションが終了して高さが確定してから？）、mapを呼び出すというのがわかりやすい気がしてきました。。。。。やり方はよくわかりませんが・・。