Googleマップをオートコンプリート機能付きで検索出来るようにする、というスクリプトのご紹介。シンプルで良さそうですね。jQueryに依存します。
検索可能なGoogleマップをWebサイトに設置した際に、オートコンプリート機能を付けたもの。情報量の多い地図コンテンツとは相性ピッタリですね。
Geocomplete
検索出来るGoogleマップ向けのキーワード補完スクリプトです。便利。
上記のように入力中に該当キーワードが表示されます。
< script src = "http://maps.googleapis.com/maps/api/js?sensor=false&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となっています。