groundwalker.com
自分が普段 Firefox なものだから，ページ作ったときにはまず，Firefox (しかも on Mac)で確認して，おーけー，とか思ってしまうけど，一般的には IE on Win なわけです。いやいや確認してみると javascript まわりでやっぱりエラーがでてたりしてデバッグしたり，ぐぐったりするはめになる。
で，今回 Google Maps API 関連での注意事項 for IE を覚え書きとしてまとめてみたりする。
onloadを使う
body中に google map の初期化コードを書いて実行させると，たとえ Firefox ではまともに表示されても，IEではエラーになる場合がある。エラーになる場合とならない場合があるようだが，どこぞの情報によれば，<div></div>等のブロック要素がネストしているような場合，エラーが発生しやすいようだ。で，結局のところ，初期化コードが実行されるタイミング次第（たぶん，初期化時に必要な要素が実行前にIEによって認識されているかどうか）なので，試行錯誤して初期化コードの置き場を決めるのは得策ではない。
結論としては，Google mapの初期化コードを関数としておいて，<body>のonloadでその関数をたたくようにする，というのが解らしい。 こんなかんじ。
<bodyonload="onLoad()">
......
<div id="map"></div>
......
<script type="text/javascript">
function onLoad(){
var map = new GMap2(document.getElementById("map"));
map.setCenter( new GLatLng(35.3289608333333, 139.548061666667), 14);
......
}
</script>
......
</body>
地図で線を引くためには？
これも Firefox ではエラーにならないが，IE ではエラーになる例。
var points = [];
points[0] = new GLatLng(35.3378966666667, 139.544556666667);
points[1] = new GLatLng(35.3374016666667, 139.545133333333);
var polyline = new GPolyline(points,"#EE0000",6);
map.addOverlay(polyline); <--ここでエラー発生
線を引くためには上記のようなコードを書くのだが、addOverlay() の呼び出しでエラーになることがある。線を引くために、VML を使っており、これの namespace 宣言をしておかないと IEの場合エラーになってしまうのだ。詳しくはこちら。一部引用。
If you want to show polylines on your map (like the lines used by Google Maps to show driving directions), you need to include the VML namespace and some CSS code in your XHTML document to make everything work properly in IE.
分かってしまえば、なんてことないが、IEで出力されるエラーから上記原因を追及することは相当ムズカシイだろう＞MSさん、たのむよ。
Comments (1)
参考になりました。
同じようにIEで表示できていない人です。
しかし、で読み込んでしまうと、他のJavascriptのライブラリ(GreyBoxなど)に影響を与えてしまうため、
setTimeout("load()",1000);
としたところ、やはりIEでは読み込んでくれませんでした。
タイミングの問題以外の問題ではないかと思います。
from hirotaka | 2007年01月14日 23:44
2007年01月14日 23:44