doodle開発記　石丸健太郎

GoogleMapsで何か開発された方であれば、必ずや一度は通る登竜門？
このメッセージに途方にくれた方も多いのではないでしょうか？
私もその一人。ちょっとググってもわんさか出てきます。

IEでGoogleMapsを扱おうとすると、単純な表示なら問題なくてもちょっとタグをいじっただけでこのような意味不明なメッセージで表示ができなくなってしまう。しかもFireFoxのような親切なエラーコンソールもないので、エラー内容も行数も怪しげで、こんなんでどうやってデバックせいっちゅうの。

結局レンダリングのタイミングでIEの気に障る部分がでるとこのエラーが出るようで、iframeで呼び出すかbody onloadで呼び出すと出なくなるというのが解決策の模様。ここまではよかった。

iframeは動的なサイトでは非常に扱いづらいのでonloadを使うことになるのだが、onloadでなければ駄目ということは、データがすべて呼び込まれたあとに実行されるということを意味するのと、処理を関数にひとまとめにする必要があるということを意味する。

一方どういうわけかIEではGoogleMapsのMAPオブジェクトを生成するのに
varで変数を宣言しないと動いてくれないのである。（他のブラウザではそんなことはない）

しかしだ。varで宣言してしまうと関数内のローカル変数として扱われてしまうので、onloadの中に入れてしまうと、外からMapを参照したいときにスコープから外れて実行できなくなってしまうのだ。
すべてCGI処理するのならまったく問題ないのであるが、Ajaxで通信したい場合、onloadで呼ばれるのは初回のみなので困ったことになる。どうしたものか。。。

わかってしまえば、バカバカしいというか単純なのだが、
varによる変数の定義とMapオブジェクトの生成を同時にしなければいけない理由はない。

つまり
var map;
と先に宣言しておいて関数内で
map = new GMap2(document.getElementById("map"));
とすれば後から定義した関数の中からでもどこからでもMapオブジェクトが参照できるので
IEでも他のブラウザでも問題なく動くというわけだ。

何気にこのサイトのサンプルスクリプトを見て気がつきましたよ。THX。
動いたときには思わずプラトーンばりにガッツポーズしてしまいました。。

しかし、、まあ、たったこの一行に気がつくのにえらい時間がかかってしまったというわけで。OTL。。。情けない。。


追記

IEではHTML中に定義されたID名もJavaScriptのグローバル変数として認識されてしまうらしいのでmapを描画するdivのID名とインスタンスを生成する変数名とを違うものに変えるか、もしくはvarでローカルスコープにするしかないようですね。ちなみにIEerBugというのを使うとIEでも多少エラートレースができるようになります。それにしてもIEはキャッシュの問題などもあり一筋縄ではいきませんので、治らないと思っても再度キャッシュをクリアするなどすると動いたりします。あと生成したMapオブジェクトを後からリサイズしようとしても機嫌が悪くなることもあるようです。サイズはMAPオブジェクト生成前に指定すると回避できる場合も多いようです。IE手ごわし。。。