Home > Ruby On Rails > GoogleMapでマッシュアップの練習（Rails編） #3

GoogleMapでマッシュアップの練習（Rails編） #3

2007-11-03 (Sat) 16:12
Ruby On Rails , googlemap

クリックしたら場所をサーバに送信して旅行情報を取得・表示を行う。まずはサーバと通信するところだけを作ってみよう。どこぞのGoogleMapのサンプルで以下のようなコードを拾ってきた。ほぼそのまま使っている。

サーバとの通信部分

function xmlRpc(point){
  var req = GXmlHttp.create();
  req.open("GET", "main/search?x=" + point.x + "&y=" + point.y, true);
  req.onreadystatechange = function(){
    if(req.readyState == 4){
      //dummy
      alert(req.responseXML);
    }
  }

  req.setRequestHeader("Content-Type", "text/html; charset=UTF-8");
  req.send(null);
}

これをトップページに組み込んでクリック時のリスナ関数から呼び出すようにする。

GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
    alert("x = " + point.x + ", y = " + point.y);
    xmlRpc(point);
  }
});

全体としてこうなった。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Mapテスト</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAABWYMASZTPMzQMXu2alSa6xTvcRCYKSpWpPqDL-sNMuxVdHFI_BTd8zF9kdpV97QhhvGd0NWsQckXsw"
  type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(38, 138), 5);
    map.disableDragging();
}

GEvent.addListener(map, 'click', function(overlay, point) {
    if (point) {
        alert("x = " + point.x + ", y = " + point.y);
        //map.openInfoWindow(point,
        //document.createTextNode("openInfoWindow Test"));

        xmlRpc(point);
    }
});

function xmlRpc(point){
    var req = GXmlHttp.create();
    req.open("GET", "main/search?x=" + point.x + "&y=" + point.y, true); //app/controllers/main_controller.rb のsearchメソッドが呼び出される（パラメータはxが経度、yが緯度）
    req.onreadystatechange = function(){
        if(req.readyState == 4){
            //dummy
            alert(req.responseXML); (←とりあえず結果を表示させるだけ）
        }
    }

    req.setRequestHeader("Content-Type", "text/html; charset=UTF-8");
    req.send(null);
}
//]]>
</script>
</body>
</html>

次はサーバ側の処理。app/controllers/main_controller.rbにsearchメソッドを追加。

class MainController < ApplicationController

    def index
    end

    def search
        render(:layout => false)
    end
end

レイアウトは使用してないけど、画面表示をさせないということから念の為に無効化しています。次にviewを作成。app/views/main/search.rhtmlを以下のように作成します。

dummyString!!

で、ページを再読み込みして地図上をクリック。緯度、経度が表示された後、「dummyString!!」が表示されれば・・・・

されない・・・

nullが表示されます。なぜだ？と調査開始。サーバのログを見るとsearchメソッドは正常に呼び出されてHTTPレスポンスコードも200。つまりサーバに問題はない。それならクライアント側ってことで、JavaScript部分を見直していると気になったのはこの部分。

alert(req.responseXML);

メソッド名から察するに結果XMLを取得しているわけだが、今回は結果は単なる文字列であってXMLではない。そう思って調査していると以下のページを見つけた。予想は正しくreq.responseTextじゃないというメソッドもあるようだ。

XMLHttpRequest入門【メソッド等の確認とシンプルなコード】

修正後、ページを再読み込みして画面クリックすると、見ごとに「dummyString!!」が表示された。今回はここまで。

トラックバック:No Trackbacks

トラックバック URL: http://blog.garden-place.jp/action.php?action=plugin&name=TrackBack&tb_id=13
Listed below are links to weblogs that reference: GoogleMapでマッシュアップの練習（Rails編） #3 from Web　酒　肴

このエントリにトラックバックはありません

このトラックバックURLを使ってこの記事にトラックバックを送ることができます。もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.

Home > Ruby On Rails > GoogleMapでマッシュアップの練習（Rails編） #3

プロフィール