ちょっと便利そうなライブラリがあった
ので備忘録。Googleマップでキーワード
や郵便番号を入力するだけで、該当する
場所を表示します。ちょっと場所を確認
したい、みたいなシーンは地味にありま
すし、これは手軽に実装出来るので覚え
ておきたい。

Googleマップネタです。jQueryでオート検索する地図コンテンツを作りましょう、というもの。フォーム入力の補助にもなりそうなならなそうな。

jQuery Automatic Geocoder

動作サンプルです。適当に入力してみてください。郵便番号でも検索できます。

表示が、ブログのCSSに影響されてしまっていますが気にしないで下さい。シンプルで使いやすい印象でした。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="jquery.auto-geocoder.min.js"></script>

本体とAPIとプラグインを読み込みます。今回は位置情報は取得しないのでsensorはfalseにしています。

で、セレクタ指定。

$(function() {
  $('#location').autoGeocoder();
});

最後にマークアップして終わり。

<div id="map">
    <form>
        <input type="text" id="location" value="東京">
    </form>
</div>

あとはボックスのサイズをCSSで決めればOKです。簡単ですね。

コードも長くないので、自分好みに変えてあげるのもいいですね。道順出せると素敵かも。使いやすそうで気に入りました。

Googleマップ便利ですねー。Geolocation APIもあるのでこれも近いうちに触っておきたいです。

ライセンスはMITです。Githubでどうぞ。

jQuery Automatic Geocoder on github