【Javascript】Google Maps v2を設置する(6)

Google Maps v2を設置する(6)

---

1: Ajaxな通信で座標を読み込み連続描画
2: ソース

今回は、前回よりも多少簡単なスクリプトを試してみます。Ajaxによるファイルロードとマーカー描画の組み合わせです。

Google Mapsには、 クロスブラウザな方法で XmlHttpRequest インスタンスを作成するGXmlHttpクラスがありますので、 これを利用し、 座標データを書いたファイルをAjaxで読み込み地図上にマーカーで順番に表示します。

これ自体は、v2というわけではありませんが、Google Mapsでの、基本的なAjax動作の確認ということで試してみます。(*このソースは、拙著 『入門Ajax 増補改訂版』のCHAPTER11 Google Maps API サンプルからの応用です。)

Ajaxな通信で座標を読み込み連続描画

今回も、例によって、まず現物を確認してみましょう。ボタンを押すと、マーカーが4つ連続表示されます。

→サンプル



これは、別に用意した、座標データを書いた、次の4つのファイル(sample1.txtからsample4.txt)をAjaxで動的に読み込み、マーカー表示しています。

139.773,35.631

139.776,35.634

139.779,35.637

139.782,35.640

つまり、このデータファイルを取り替えるだけで、地図側のスクリプトにはほとんど触らずに、マーカー表示をダイナミックに変更できるという仕組みになっているわけです。

いろいろな地図アプリをGoogle Mapsと組み合わせてマッシュアップするときに、Ajaxで軽快かつメンテナンスを楽にしてくれるといったテクニックです。

では、次にそのソースを見てみましょう。

ソース

今回のポイントは、ボタンを押したときに起動するdrowMarker()関数による連続処理と、XMLHttpRequest通信処理のgetLonLat(url)関数です。

drowMarker()関数の中では、setTimeoutによって、getLonLat()関数が順番に起動されます。

setTimeoutの第一引数は実行する関数で、第二引数は実行するまでの待ち時間(1/1000秒単位)ですが、第一引数に書かれたgetLonLat()の引数には、座標を書いたファイルが指定します。

この結果、待ち時間、0秒、500/1000秒、1000/1000秒、1500/1000秒の順にgetLonLat()が実行されていきます。

関数getLonLat()の引数は内部で、XMLHttpRequestのopenメソッドのAjaxのリクエスト先URLとして渡され、実行されます。

  <script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー"
          charset="utf-8"
          type="text/javascript"></script>

    <!-- このDIVへ地図を表示します-->
    <div id="map" style="width:500px;height:400px"></div>

    <script type="text/javascript">
    //<![CDATA[

    //地図のインスタンスを生成します
    var map = new GMap2(document.getElementById("map"));
    
    //コントロール追加
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    
    //レインボーブリッジ付近を表示します
    map.setCenter(new GLatLng(35.633616348,139.7658348),14);

    //順番にファイルを読み込み、表示開始
    var drowMarker = function(){       setTimeout("getLonLat('sample1.txt')",0);       setTimeout("getLonLat('sample2.txt')",500);  //0.5秒後       setTimeout("getLonLat('sample3.txt')",1000); //1秒後       setTimeout("getLonLat('sample4.txt')",1500); //1.5秒後
    }

    //XMLHttpRequest通信処理
    function getLonLat(url){
    
      //GXmlHttpオブジェクト生成
      var request = GXmlHttp.create();
      request.open("GET", url, true);
      
      //コールバック関数
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
        
          var res = request.responseText;//データ取得
          var rows = res.split('?n');    //改行で分解
          
          //順次座標にマーカー描画
          for (var i = 0; i < rows.length; i++) {
          
             //カンマで経緯度を分解して取り出す
            var lon = rows[i].split(',')[0]; 
            var lat = rows[i].split(',')[1];  
            
            //位置生成
            var point = new GLatLng(lat,lon);
            
            //マーカー生成
            var marker = new GMarker(point);
            
            //マーカー描画
            map.addOverlay(marker);
          }
          
        }
      }
      //送信
      request.send(null);
    }

    //]]>
    </script>
  <input type="button" value="マーカー表示" onclick="drowMarker()" />
  Ajaxな通信で座標を連続して読み込む

Ajaxのリクエスト実行後レスポンスは、コールバック関数onreadystatechange 内でresponseTextで受信できますので、それを「,」で分解してマーカーの座標として利用します。

本当は、各ファイルとも1行しかありませんから、for文で取り出す必要もありませんが、一応、応用を利かせられるように、複数行にわたって「改行」と「,」で区切って、 データを書いても自動描画できる仕組みにしてあります。

このXMLHttpRequest用のGXmlHttpオブジェクトの仕様は、 公式リファレンス、あるいは 拙訳とサンプルなどご参照ください。