クリックしたら場所をサーバに送信して旅行情報を取得・表示を行う。まずはサーバと通信するところだけを作ってみよう。どこぞの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&v=2&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!!」が表示された。今回はここまで。
]]>
