ローカル検索機能を表示する

(注意!)この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。


Local Search コントロールを使うと、ローカル検索機能が実現できます。 ここでは、Local Search コントロールを表示する方法を説明したいと思います。

ローカル検索サンプル

以下のサンプルはGoogle MAPS APIを使ったページのソースです。 強調してある部分がポイントです。

以下のサンプルを使うには、「YOUR_KEY」と書かれている部分をご利用のGoogle Maps API Keyに書き換える必要があります。 下記サンプルには、置き換えが必要な「YOUR_KEY」が2箇所あるのでご注意下さい。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>

  <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY"
      type="text/javascript" charset="UTF-8"></script>

  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY"
       type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
       type="text/javascript"></script>
    <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");

    #map {
      border : 1px solid #979797;
      width : 100%;
      height : 575px;
    }
  </style>

 </head>

 <body>
   <div id="map" style="width:450px; height:400px"></div>
   <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));

      map.addControl(new GLargeMapControl());

      map.addControl(new google.maps.LocalSearch("pub-00000"));

      map.setCenter(new GLatLng(36.033333, 139.15), 11);
    }

    //]]>
   </script>
 </body>
</html>

2007年11月現在、Local Searchを実現するには多少面倒な追加をしなくてはなりません。 Local Searchコントロールを使うには、ローカルサーチ用に提供されているJavaScriptとCSSを読み込みます。

Local Search用のJavaScriptとCSSを読み込んだ状態で「map.addControl(new google.maps.LocalSearch());」を追加すると「検索」コントロールが地図の下部に表示されるようになります。 (ただし、map は var map = new GMap2(document.getElementById("map")) とします。)

Local Searchの結果には広告が含まれることがあります。 LocalSearch()の引数にAdsense IDを渡すと、検索結果から収益をあげられるようになります。 上記サンプルの「pub-000000」の部分を、ご利用のアドセンスIDに変更してご利用下さい。 アドセンスに登録をしていない場合は、LocalSearch()という感じで引数なしでご利用下さい。

表示例

表示例です。