• 締切済み

タブに地図を入れたら、中心がずれました。

タブに地図を入れたら、中心がずれました。 タブはないとき、ずれないです。 あれこれ試しましたが、どうも修正できませんでした。 教えてください。お願いします。 下はソースです。 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="http://5am.jp/common/js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="http://5am.jp/common/js/ui.core.js" type="text/javascript"></script> <script src="http://5am.jp/common/js/ui.tabs.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="http://5am.jp/common/css/ui.tabs.css"> <script type="text/javascript"> $(function() {$('#container-1 > ul').tabs();}); </script> </head> <body> <div id="container-1"> <ul> <li><a href="#fragment-1"><span>タブ1</span></a></li> <li><a href="#fragment-2"><span>タブ2</span></a></li> <li><a href="#fragment-3"><span>タブ3</span></a></li> </ul> <div class="Clear"> <div id="fragment-1"> <p>タブ1の内容</p> </div> <div id="fragment-2"> <p>タブ2の内容</p> </div> <div id="fragment-3"> <table width="705" border="0" cellpadding="0" cellspacing="0"> <tr><td class="button-area"><div align="center"> </div></td> </tr> <tr><td>&nbsp;</td> </tr> </table> <div id="map_canvas" style="width: 705px; height:375px"></div> <script src="http://maps.google.co.jp/maps?file=api&v=1&key=ABQIAAAAQzfW6rb5jraVXMAQHx8W2hRz0pttuSXoxOtnDzBeMrT8H_GbDhS6TtNcJU1K_O_fBt6-ziKGKvN9gg" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map_canvas")); var point = new GLatLng(35.778976, 139.725286) map.setCenter(point, 15); var marker = new GMarker(point); map.addOverlay(marker); map.addControl(new GLargeMapControl()); marker.openInfoWindowHtml('東京都北区赤羽2-5-7 '); } </script> </div></div></div></body></html>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

使ったことはないですが、 確か地図をロードする前に、対象要素が非表示になっていると位置がずれるという現象が発生したような…  http://okwave.jp/qa/q6250162.html  http://okwave.jp/qa/q6258704.html でも、ご提示のコードでは「v=1」とありますが、v1も同じなのか不明。(v1ではないのかな?) 試しに、ご提示のコードのtabs設定の部分をコメントアウトしてみると、ちゃんとずれずに表示されますよね? (どれが、ずれていない状態なのかわかりませんけれど、多分ずれていなさそうに思えます) tabsの設定の中で、要素をdisplay:noneにしているのだと想像しますが、非表示にする方法を別の方法に変えれば確かOKだったように思います。 例えば、マイナスのマージンで画面外に表示させておくとか、あるいはz-indexの制御で重なり順を変えるとか、あるいは直接要素の順番を入替えてやるとか…