Google Mapsで悩んだ！
IEでGoogle Mapsいじってたんだけど、いやねえ、もう大変ですよ。
<html>
<head>
<script>
function load_GoogleMap() { ... }
addListener(window, 'load', load_GoogleMap, false);
</script>
</head>
<body>
<div class="contents">
<div id="map"></div>
</div>
</body>
</html>などとやると、FireFoxやOperaでは動くのに、IEではさっぱり動かない。head内に書いたaddListenerが無視されてる模様。仕方ないので、こうやってみた。
<html>
<head>
<script>
function load_GoogleMap() { ... }
</script>
</head>
<body>
<div class="contents">
<div id="map"></div>
</div>
<script>
load_GoogleMap();
</script>
</body>
</html>すると動かないどころか「サーバーが見つからないか、DNS エラーです。」と来たもんだ。
(ﾟДﾟ)ﾊｧ?
そんなの普通HTMLやJavaScriptの記述ミスごときで出るようなエラーじゃないですよね。そんで他のページのGoogle Mapsはちゃんと動いてるんだし、このページだけが動かないとなるとそれはやっぱりPathInfo使ってるせいなんかな？とか、それともHTTP応答ヘッダが実際の出力と矛盾でもしてるんかな？とか、あれこれ調べてみたけど、とくに問題らしいのは見つからず。もう、これで数時間は悩んだよ……。
もしやGoogle Maps特有の問題なのかと思ってググってみたら、ビンゴ。というか、Google Mapsそのものの不具合ではなく、どうもIEのバグらしい。理屈は分からんけど、divブロックの中にもう一つdivブロックを入れてるのがダメっぽい。ためしに、
<html>
<head>
<script>
function load_GoogleMap() { ... }
</script>
</head>
<body>
<div class="contents">
</div>
<div id="map"></div>
<div class="contents">
</div>
<script>
load_GoogleMap();
</script>
</body>
</html>こうやってdivの入れ子をなくすとエラーは出なくなる。しかし入れ子をなくすのははっきり言って現実的じゃない。なんとかならんもんか……。と、さらに調べてみると、head内のイベントリスナーは無視されても、bodyのonload属性はちゃんと拾われてるらしいことが分かった。そこでdivを入れ子に戻しつつ……、こうしてみる。
<html>
<head>
<script>
function load_GoogleMap() { ... }
</script>
</head>
<body onload="load_GoogleMap()">
<div class="contents">
<div id="map"></div>
</div>
</body>
</html>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━ｯ!!
divを入れ子にしても動いた！FireFoxでも動いた！Operaでも動いた！SafariやMac上のブラウザは知らんがとりあえずWinでは動いた！やっと動いたーっ！
ふう……。これだけのことなのに、とんでもなく時間をつぶされちゃったよ……。本当にIEは困ったちゃんだな。AjaxするにもActiveX経由だし……これはIE7で改善されたらしいけど。
まとめ。
