【Javascript】Ajax Google Maps XMLをHTMLに加工する

Google Maps XMLをHTMLに加工する

---

1: XMLをロードしていろいろなHTMLに加工表示する
2: サンプルのソース

前回は、 Google MapsのGXmlHttpクラスを利用して、 XMLデータから、県名と経緯度座標を使ったOPTIONを生成し、Google Mapsへ地図を表示してみました。

今回は、XMLで読み込んだデータを、OPTION以外のいろいろなHTMLに加工して出力する方法を試してみます。 作るHTMLは、テーブルとボタンとリンクです。

Google Maps に限らず、AjaxなHTTP通信で読み込まれたいろいろなデータは、目的に合わせたHTMLに加工して、 様々に、そしてダイナミックに利用することができるのです。

(今回のようにXMLで受信だけというケースではおそらく問題ないはずですが、日本語の送信データがある場合などには、 GXmlHttpだけでは、Content-Typeヘッダやエンコード処理が明示的には実装されていませんので、 文字化けする場合があります。必要に応じて、前々回の記事で使用した Ajax簡易ライブラリ 内の使える部分などを利用すると良いかもしれません)

XMLをロードしていろいろなHTMLに加工表示する

→サンプル

まず、右の画像は、「テーブル」ボタンを押したときのものです。 このボタンを押すと、次ページソースの通り、 control='table';loadFile('./file/ken.xml')が実行され、ken.xmlが読み込まれます。 ken.xmlロード後のコールバック関数on_loadedXML(oj) 内には、コントロールの種類を切り替えるswitchがあり、 control='table'の時には、メソッドresOj.addTable()が実行される仕掛けになっています。

このresOjは、関数chgControl()をnewして得られたインスタンスです。resOj.addTable()と書けば、 chgControl内の関数addTable()が実行され、その中に書いてあるテーブル表示用スクリプトが動作するという仕組みです。


次の画像は、「ボタン」というボタンをクリックしたときのものです。 このボタンを押すと、今度は、control='buttons';loadFile('./file/ken.xml')が実行され、上記と同様に コールバック関数on_loadedXML(oj)内で、メソッドresOj.addButtons() へ分岐し、ボタンが生成されます。


その次の画像は、「リンク」というボタンをクリックしたときのものです。 このボタンを押すと、今度は、control='links';loadFile('./file/ken.xml')が実行され、これも上記と同様に コールバック関数on_loadedXML(oj)内で、メソッドresOj.addLinks() へ分岐し、リンクを含むHTMLが生成されます。

この時、テーブルボタンでも同様ですが、リンクのテキストがOperaの場合に文字化けしますので、分岐してエンコードすることで回避をしています。

このサンプルのソースは次ページです。 また、このサンプルは「OPTION要素をXMLで書き換える」を利用し、それに地図を連動させています。 使用したXMLは、そちらの記事をご覧下さい。