まとまった時間があったので、Java Scriptの練習も兼ねて、Google Maps APIで遊んでみた。
作ったのは、Google Map上にマーカーを配置するエディタ。
残念ながら現在、IEのみ動作する。
説明
起動すると、東京駅近辺の地図とともに５個の赤いマーカーと中心を示す十字が表示される。
赤いマーカーをクリックすると、ポップアップが表示される。ひとつは遊びで、本Blogの記事からカットアンドペーストしたものが入っている。
赤いマーカーをクリックすると、ポップアップが表示されるだけでなく、地図の下に、LNG(経度）LAT(緯度）HTML（ポップアップ内のHTML）が表示される。
ポップアップを閉じた状態で（ここ重要。閉じないとおかしくなります）地図をスクロール拡大縮小しても中心を示す十字はちゃんと中心にある。
地図をスクロールすると、地図の下のLNG(経度）LAT(緯度）が随時更新される。ポップアップが開いた状態だと、一見正しく更新されているように見えるが、実はスクロールがとまったときに、間違った情報を表示する。
地図の中心を、マーカーの無い位置まで、スクロールし、HTMLのエディットボックスに適当にHTML（面倒なら適当な文字列）を入力し、「ここにマーカーを置く」ボタンを押す。すると、その場所に新たにマーカーが置かれる。
この新しいマーカーにはちゃんとHTMLに対応したポップアップが表示されるようになる。
一番下の一番大きいエディットボックスはマーカー情報をあらわすXMLデータが表示されている。
新しいマーカーを「ここにマーカーを置く」ボタンで追加すると、XMLデータも更新されて表示される。（これが、FireFoxだと動かん）
逆に、XMLをこの表示域にカットアンドペーストして、「このXMLの内容を地図に反映する」ボタンを押すと、そのXML情報に基づいて、地図上のマーカーやポップアップが更新される。
このXMLデータをファイルにして（もちろんUTF-8で保存して）おけば、次回起動したときにはそのデータを元に表示してくれる。
文章にして説明すると、うだうだ長ったらしいけど、見てもらえればすぐにわかると思う。別にサーバー側のコードはない。
何がやりたかったって、地図と連動したWebを作りたかっただけなんだけど、これを作るためには、ちまちま緯度経度情報を拾わなきゃだめで、あんまりにも面倒なので、その手のアプリを作り始めたら止まらなくなった。
「ここにマーカーを置く」ボタンにフォーカスを入れておけば、Enterでボタンが押せる。すなわち、位置情報を拾うだけなら、スクロール、Enter、スクロール、Enterを繰り返すだけ。非常に楽チン。
あとは、これにアイコンの種別だとか、縮尺によって表示するしないの指定をさせたり、HTMLを直接入れるんじゃなくて構造をもった情報を入力させてXSLTでポップアップを作るなり、いろいろアイデアは広がりそう。
XML自体をサーバーにPOSTしなおしたり、更新差分だけPOSTしたりして、サーバ側にDBでもこさえれば、それなりに地図アプリの出来上がりである。
最初の一歩としてはいろいろ遊べるコードである。
コードは無駄に長い。
やっているうちにいろいろ追加しているうちに収拾がつかなくなったというのが本音。ここまででかくなるなら、関数をぶちまけないでクラスで分けたほうが良かったかも。まぁ練習だからええか。。。
現在、わかっている問題
１．ポップアップが出た状態で、スクロールすると、中心を表す十字マーカーの位置がおかしい。
GMap.getCenterLatLng()関数を使って中心位置を求めているのだが、どうもポップアップが出ているときは、この値が怪しいらしい。
KsGMapではちゃんとできているのが、悔しいところである。何が違うんだ。いや、根本的に俺のスキルが低いだけだろうという話も。。。
２．FireFoxでは、新しくマーカーを追加した後、XMLデータの表示がおかしくなる。
IEだと、XMLNodeにxmlという文字列をとってくるプロパティがついてるから楽チンなんだけど、FireFoxではUndefinedになる。FireFoxで、どうやって文字列取ってくるんだろう。自分でパースしながら作らないとだめなのかしら？これができないと、クライアント側からXMLデータをPOSTするときに、自前で文字列をつくらないといけなくて、非常に面倒。なんか、きれいな解がありそうなんだけど、というか無かったらFireFoxからPOSTするとき、仕様としておかしいじゃん、誰か詳しい人教えて。
リクエスト、コメント、提案、ご教授、よろしくお願いいたします。
特にご教授、おいらJavaScript初心者なので、根本的に考え方間違ってるかもしれないので、いろいろ教えてください。
IEにあるxmlプロパティをFireFoxでどうやって実現するかGoogle先生に聞いたんだけど、xmlってキーワードがあきません。いらんもんが引っかかりすぎちゃって。。たすけてぇ