失礼いたします。

Google maps V3 をタブメニューの中で表示させたいのですが、初期状態がdisplay=”none”のため、うまく表示できません。

Mapのタブメニューを初期状態で開いている display=”list-item” の状態だとうまく表示できています。


・初動
display:none
  ↓
・Map呼び出し前にjsにて強制表示
display:block
  ↓
Mapのtilesloadedイベント完了後に
display:none

のような流れで回避できるようですが、javascript の知識がないのでたいへん困っております。

現在

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(緯度, 経度),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(緯度, 経度),
map: map,
title: 'タイトル'
});
});
</script>

となっております。

たいへんお手数ですが、どなたかご教授頂けると助かります。

A 回答 (3件)

jQueryのタブメニューといってもいろいろなのがありますけど、タブが選ばれ表示された時のコールバック関数を指定出来るタイプのライブラリーをお使いなら、


google.maps.event.addDomListener(window, 'load', function() {})
の代わりに、そのコールバック関数で、Google Mapの初期化をしてあげればよいと思います。
    • good
    • 0

タブメニューとのことですが、display=”none”だとうまくいかないみたいですので、かわりに



・ visibility:hidden; を用いる
・ 表示位置にoffsetをかけて画面外に置く
・ z-indexで重ね順を制御する

などの方法に変えれば、たしか大丈夫だったと思います。
visibility:hidden/visible;を使えばdisplay=”none”とほぼ同じでいけるのでは?

この回答への補足

ありがとうございます。
jQueryのタブメニューを使用しております。
visibility:hidden/visible; を使用する場合、
そちらのjsファイルを編集すればよいということでしょうか?

補足日時:2010/12/28 06:12
    • good
    • 0

「Google maps API V2」 の方を使えば、初期状態がdisplay=”none”


でもうまくいくんですけど、V3にこだわるんですよね。

この回答への補足

ご指摘ありがとうございます。
キー取得の関係で、可能であればV3でできればと考えております。

補足日時:2010/12/24 19:28
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!

  • カウントダウンしたいことある?

    大晦日は、2011年最後の1日です。天皇陛下が「心の重い年」と表現されたように、3月11日の未曽有の大惨事は本当に大変な出来事でした。今年の漢字として選ばれた「絆」が我々にとって大切なものであると強く感じさせ...

  • たまランチ:第47話「さつまいも」

    外ランチを愛してやまない元気な女子社員・たまちゃん(26)。オシャレなお店より「安くておいしい」お店が大好き! そんな女子力低めなたまちゃんの、色気より食い気な日々をつづります。

  • エルフ田さん:第71話「貯められる人」

    エルフ(ファンタジーとかに出てくる長寿の種族)の「エルフ田」と、ただの人間である女子社員2人による日常ギャグ。エルフならではのズレたツッコミでバシバシ人間界の話題を斬っていきます。

  • 感情的にならない人の気質

    あなたの身の回りで感情表現が薄い人はいないだろうか? 感情表現が薄いといい意味でクールに感じ、大人な印象を持つ人も多いだろう。だが、一方で何を考えているか分からず、とっつきづらい印象を抱くこともあるの...

  • デニーズで6月7日より「ビーフフェア」が開催

    デニーズで2016年6月7日から7月11日(予定)まで、「ビーフフェア」が開催される。気温も上昇し、スタミナを身体に取り入れたいこの時期におすすめなビーフメニュー4品が提供される。 登場する4品は、しっとりとし...

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ