ちょっと便利そうなライブラリがあった
ので備忘録。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でどうぞ。