F.Ko-Jiの「一秒後は未来」

Google Maps API の Local Search Control - そのうち AdSense と統合も

Google AJAX Search API Blog: Local Search Control for Maps API より。

まだ日本の地域では検索結果が表示されないので意味がないのですが、Google Maps API と Google AJAX Search API を利用した Local Search Control がリリースされているので使い方をメモしておきます。

この Local Search Control はそのうち Google AdSense の ID と統合され、検索結果に AdSense の広告が出るようになるそうです。(参照: Google AJAX Search API – AdSense in the Local Search Control for Google Maps)

さて、すでに Google Maps API を利用しているサイトならば、Local Search Control は以下の4ステップで組み込めます。

1. Google AJAX Search API をインクルード

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=..."
 type="text/javascript"></script>

2. Local Search Control をインクルード

<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
 type="text/javascript"></script>

3. Local Search Control 用のCSSをインポート

<style type="text/css">
  @import url("http://www.google.com/uds/css/gsearch.css");
  @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
</style>

4. 次の1行を適切な箇所に記述

map.addControl(new google.maps.LocalSearch());

そのほかのオプションについては、Google AJAX Search API – Local Search Control for Google Maps をご覧ください。

ためしに「飲食店検索 – この辺で」に対してLocal Search Controlを実装してみました。地図の左下に検索ボックスが表示されていると思います。残念ながら、どんなキーワードを入れても現在は検索結果は表示されません。(追記) IEでエラーが出ていたので外しました。

実際に動く様子を試したい方は、Google が用意しているサンプルをお試しください。
Local Search Control for Google Maps – default.html
Local Search Control for Google Maps – compact.html

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など