マッシュアップ

3.駅名からGoogleMap

HeartRails ExpressとGoogleMapを組み合わせます。
1.フォーム画面
HeartRails ExpressのAPIを見ると、
「都道府県名」 「路線名」 「駅名」 の連結コンボボックスの設置の仕方が記述されています。
記述されている通りに配置を行います。

検索ボタンを配置して、駅名を元にGoogleMapを表示します。

2.検索ボタンの処理
prototype.jsを利用して、オブジェクトを扱いやすいようにします。

検索ボタンが押されたら、選択された「駅名」を取得します。
選択された「駅名」を元に、駅の経度、緯度を取得します。

経度、緯度の情報は、phpで取得します。
prototype.jsで、作成したphpにリクエストを送り情報を取得します。

駅情報を取得したら、経度、緯度を用いて、GoogleMapを表示します。

3.経度、緯度情報取得
HeartRails Expressに「駅名」から駅情報を取得できるAPIがあるので、利用します。
リクエスト送信@PHPの通りに、リクエストを送信します。

結果は、JSON形式で受け取ります。
JSON形式に変換@PHPの通りに、取得したJSONファイルを扱います。

4.完成
動くことを確認します。

駅名からGoogleMapを表示

5.課題
物足りないですね。
ただ、前回作成した、郵便番号からGoogleMapを表示するより、使えると思います。


戻る

xml E-Mail
Copyright (C) 2008 マッシュアップのお勉強(備忘録). All Rights Reserved.