こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Google mapV3 display=non

失礼いたします。

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>
<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>

となっております。

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

投稿日時 - 2010-12-23 19:46:20

QNo.6403068

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

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

投稿日時 - 2010-12-27 10:39:00

補足

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

投稿日時 - 2010-12-28 06:12:54

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

jQueryのタブメニューといってもいろいろなのがありますけど、タブが選ばれ表示された時のコールバック関数を指定出来るタイプのライブラリーをお使いなら、
google.maps.event.addDomListener(window, 'load', function() {})
の代わりに、そのコールバック関数で、Google Mapの初期化をしてあげればよいと思います。

投稿日時 - 2010-12-28 18:08:26

ANo.1

「Google maps API V2」 の方を使えば、初期状態がdisplay=”none”
でもうまくいくんですけど、V3にこだわるんですよね。

投稿日時 - 2010-12-24 09:26:22

補足

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

投稿日時 - 2010-12-24 19:28:38

あなたにオススメの質問