路線→駅名のドリルダウン検索をAPIを使って最速で実装する方法

全国を対象とした店舗データベースや不動産情報サイトなどで使うことがあると思うのですが、「都道府県を選択」→「路線を選択」→「駅名を選択」というドリルダウン検索をAPIを使って簡単に実装する方法をご紹介します。

DEMOを見ると分かりやすいですが、都道府県をセレクトメニューから選ぶとその都道府県内の路線が自動で選べるようになり、さらに路線を選ぶとその路線内の駅が選べるようになります。

DEMO

この検索機能はHeartRails Expressが提供しているAPIを使用したものです。都道府県の取得(これはベタに書いてもいいような気がしますが・・・)から都道府県内の路線の取得、その路線に属する駅名の取得まで行うことができます。
路線から駅名を検索するAPIはロケタッチ駅データ.jpがありますが、都道府県から路線を取得できるAPIはHeartRails Express以外に見つからなかったので、全国を対象としたポータルサイトや情報サイトの構築の際に活用できるのではないでしょうか。

各情報の取得はXMLかJSON(P)で行うことができますが、以下の例はJSONPによる取得例です。
ちょっとしたポイントですが、路線から駅名を取得する際に指定都道府県以外の駅名が含まれているケースがあります(東海道本線などの長い路線)。駅を取得する際に属する都道府県など駅名以外の情報が取得できますので、いったんif文で絞込みをすると選択した都道府県のみの駅名を取得することが出来ます。

jQueryを使用しているのでロードを忘れないようにしてください。

HTMLはselectのIDさえ間違えなければ特に難しい点はありません。
選択項目はすべてAPIより取得してoptionを追加しているだけです。

なお、リクエスト回数の制限(サイト内では記述を見つけられませんでしたが、ある程度以上になるとエラーを返されると思われます)や、クレジットの記載義務などがありますのでご利用の際は利用規約を確認してください。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。