• かちびと.net

    郵便番号や地名を入力するだけでGoogleマップ検索できる地図コンテンツをjQueryで作る。jQuery Automatic Geocoderという軽量なプラグインを使って検索コンテンツを作成します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

郵便番号や地名を入力するだけでGoogleマップ検索できる地図コンテンツをjQueryで作る

スポンサーリンク

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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services