失礼いたします。
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>
となっております。
たいへんお手数ですが、どなたかご教授頂けると助かります。
No.2ベストアンサー
- 回答日時:
タブメニューとのことですが、display=”none”だとうまくいかないみたいですので、かわりに
・ visibility:hidden; を用いる
・ 表示位置にoffsetをかけて画面外に置く
・ z-indexで重ね順を制御する
などの方法に変えれば、たしか大丈夫だったと思います。
visibility:hidden/visible;を使えばdisplay=”none”とほぼ同じでいけるのでは?
この回答への補足
ありがとうございます。
jQueryのタブメニューを使用しております。
visibility:hidden/visible; を使用する場合、
そちらのjsファイルを編集すればよいということでしょうか?
No.3
- 回答日時:
jQueryのタブメニューといってもいろいろなのがありますけど、タブが選ばれ表示された時のコールバック関数を指定出来るタイプのライブラリーをお使いなら、
google.maps.event.addDomListener(window, 'load', function() {})
の代わりに、そのコールバック関数で、Google Mapの初期化をしてあげればよいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- Google Maps Google Maps にお店の名前を表示する方法は? 2 2022/12/26 16:21
- Google Maps iOS でのgoogle map の地図を写真で表示する方法を教えて下さい。 Windows でgo 2 2023/06/02 09:56
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
第3日曜日のみの日付を取得、...
-
javaScript textareaの一行あた...
-
択一形式のテストをつくりたいです
-
分岐処理(アルゴリズム)
-
特定のclassを表示、非表示にする
-
Javascript で可能でしょうか
-
APIを使って埋め込んだグーグル...
-
ASP.NETのコントロールの値をJa...
-
GoogleMap 住所から座標の取得
-
商品コードを入力で、商品名、...
-
javascriptにお詳しい方に質問...
-
アルファベットABCD…をスマート...
-
JavaScriptのindexedDBに格納し...
-
なぜmatchメソッドがエラーにな...
-
ホームページの最終更新日を他...
-
ページ最終行へジャンプする方法
-
GASでGoogleフォームの自動返信...
-
functionから別のfunctionを実...
-
javascriptで自動計算フォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報