- 締切済み
CSS 3つのタブの中にgoogle mapを表示
いつも助けていただいています。 今回、表題のとおり3つのタブを設け、それぞれのタブにgoogle mapを表示させていますが、 2つ目、3つ目と切り替えると地図が正常に表示されません。 色々なサイトを参考にしていると、再読み込みをするとよい？というようなことが記載されていましたが、 まだコーディング歴が浅いものでこの場を借りてご助力を頂ければと思います。 該当項目を記載します。 【HTML】 <div id="contents"> <div id="tabmenu"> <ul> <li>タブ1</li> <li>タブ2</li> <li>タブ3</li> </ul> </div> <div id="box"> <div> <iframe src="google map"></iframe> </div> <div> <iframe src="google map"></iframe> </div> <div> <iframe src="google map"></iframe> </div> </div> </div> 【CSS】 iframe { width: 510px; height: 280px; } #contents { width: 800px; padding: 0; margin: 50px auto 0; } #tabmenu { margin: 0; width: 200px; padding: 0; float: left; } #tabmenu ul li { width: 242px; padding-bottom: 10px; font-size: 1.1em; display: block; text-align: center; list-style-type: none; cursor: pointer; } #box { width: 510px; float: right; } 【JavaScript】 $(function($) { var tabmenu = $('#tabmenu ul li'); $('#box div').hide(); $('#box div').eq(0).show(); tabmenu.eq(0).addClass('navhit'); tabmenu.click(function () { var no = $(this).parent().children().index(this); tabmenu.removeClass('navhit'); $(this).addClass('navhit'); $('#box div').hide().eq(no).show(); }); }); 足りないところが多くありご迷惑をおかけしますがよろしくお願い致します。
- doborn
- お礼率41% (88/210)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo3です。 ＞新規HTMLファイルで実行すると、うまくいかないようでした。 どううまくいかないのかわかりませんが・・・ 1）ソースをコピペする 2）質問者様の環境に合わせてcharsetを設定 3）ソースの全角空白を半角に変更 4）外部スクリプト参照部分のタグを適切に修正 （ここの掲示の関係でリンク形式になって省略されています） （jQueryとgoogle mapの2つを読み込んでいます） 以下をチェックしてみてください。 外部スクリプトは読み込めているか。 初期の表示はされているか。
- fujillin
- ベストアンサー率61% (1594/2576)
ANo2です。 時間があったので、簡単にテストしてみました。 タブは重ねておいて切り替える方式ですが、レイアウト等は適当です。 一応、表示はできています。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> * { margin:0; padding:0; list-style-type: none; } body{ background-color: #ABA; } #contents{ width:800px; margin:50px auto 0; } #tabmenu{ overflow:hidden; } #tabmenu li{ width: 120px; text-align: center; cursor: pointer; padding: 3px; margin-right: 5px; float: left; border:1px solid #888; background-color: #DDC; } #mapbox{ width: 750px; height: 500px; border: 1px solid #888; position:relative; margin-top: -1px; z-index: -5; background-color: #FFF; } #mapbox div.map{ width: 740px; height: 490px; position: absolute; top: 5px; left: 5px; } #tabmenu li.active{ background-color: #EEE; border-bottom:1px solid #FFF; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <script type="text/javascript"> $(function(){ var mapData = [ { name:"東京", lat:35.6807, lng:139.7674 }, { name:"横浜", lat:35.4662, lng:139.6224 }, { name:"大阪", lat:34.7024, lng:135.4958 } ]; var opt = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true } var maps = $("#mapbox .map"); for(var i=0, d; d=mapData[i]; i++){ opt.center = new google.maps.LatLng(d.lat, d.lng) new google.maps.Map(maps.get(i), opt); $("#tabmenu li").eq(i).html(d.name); d.element = $("#mapbox div.map").eq(i); } $("#tabmenu li").click(function(){ var i = $("#tabmenu li").index(this); $(this).addClass("active").siblings().removeClass("active"); $("#mapbox").append(mapData[i].element); }).eq(0).click(); }); </script> </head> <body> <div id="contents"> <ul id="tabmenu"> <li>tab-1</li> <li>tab-2</li> <li>tab-3</li> </ul> <div id="mapbox"> <div class="map">1</div> <div class="map">2</div> <div class="map">3</div> </div> </div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
以前にも同様のご質問があり、調べたことがあります。（記憶なので正確でないかも） 確か、非表示の要素（display:none;）にマップを表示させようとすると失敗したと記憶しています。 （詳しくは調べませんでしたが、サイズをうまく認識しなかったとかかな？） それなので、同様の効果を得ながらうまく表示させるには、 1）画面表示外に要素を置いて見えなくする 2）他の要素と重ねておいて、（下に置いて）見えなくする などの方法であれば対処可能だったように思います。 タブ制御の仕組みをjQueryのshow()/hide()で行うとhide()時にdisplay:noneになりますので、それがご質問の事象の原因と思われます。 上述の対処方法を利用したタブの制御方法に切り替えれば、マップ表示が可能になると思います。 http://okwave.jp/qa/q6403068.html
- fzodi
- ベストアンサー率0% (0/0)
idTabs.jsで作ったタブに埋め込むと上手く行きました。 そのソースにこだわりがないなら、他にもタブのソースは腐るほどあるので色々試してはいかがでしょうか。
お礼
ご回答いただきありがとうございます。 idTabs.jsの使い方を一度見てみようかと思います。
お礼
ご回答いただきありがとうございます。 こちらが他力本願過ぎて申し訳ございません。 頂いたソースをコピペし、新規HTMLファイルで実行すると、うまくいかないようでした。 もう少し試行錯誤してみようと思います。 おそらく、scriptの項目に // クリックされたら地図を再読み込み という処理を追加すればよいのでしょうが。 お手数をおかけしました。