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