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