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

締切り済みの質問

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

タブに地図を入れたら、中心がずれました。
タブはないとき、ずれないです。
あれこれ試しましたが、どうも修正できませんでした。
教えてください。お願いします。
下はソースです。
<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>

投稿日時 - 2011-04-05 12:39:35

QNo.6645982

すぐに回答ほしいです

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

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

回答(1)

ANo.1

使ったことはないですが、


確か地図をロードする前に、対象要素が非表示になっていると位置がずれるという現象が発生したような…
 http://okwave.jp/qa/q6250162.html
 http://okwave.jp/qa/q6258704.html
でも、ご提示のコードでは「v=1」とありますが、v1も同じなのか不明。(v1ではないのかな?)

試しに、ご提示のコードのtabs設定の部分をコメントアウトしてみると、ちゃんとずれずに表示されますよね?
(どれが、ずれていない状態なのかわかりませんけれど、多分ずれていなさそうに思えます)

tabsの設定の中で、要素をdisplay:noneにしているのだと想像しますが、非表示にする方法を別の方法に変えれば確かOKだったように思います。
例えば、マイナスのマージンで画面外に表示させておくとか、あるいはz-indexの制御で重なり順を変えるとか、あるいは直接要素の順番を入替えてやるとか…

投稿日時 - 2011-04-05 14:45:21

あなたにオススメの質問