Googleマップを、オートコンプリート機能付きで検索出来るようにするシンプルなjQueryプラグイン・Geocomplete

スポンサーリンク

Googleマップをオートコンプリート機能付きで検索出来るようにする、というスクリプトのご紹介。シンプルで良さそうですね。jQueryに依存します。

検索可能なGoogleマップをWebサイトに設置した際に、オートコンプリート機能を付けたもの。情報量の多い地図コンテンツとは相性ピッタリですね。

Geocomplete


検索出来るGoogleマップ向けのキーワード補完スクリプトです。便利。


上記のように入力中に該当キーワードが表示されます。

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.geocomplete.js"></script>

APIと本体とプラグインを読み込みます。

$("#foo").geocomplete({
          map: ".bar",
          location: "hoge"
});

ベーシックな地図検索なら上記のようにセッティングします。

<form>
          <input id="foo" type="text" placeholder="住所を入力してね" size="90" />
</form>
<div class="bar"></div>

入力箇所と空の要素をマークアップすればOKです。

オプションも多数用意されています。ライセンスはMITとなっています。

Geocomplete

URL :
TRB :

Comments & Trackbacks (1)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services