ローカル検索機能を表示する
（注意！）この記事は、旧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()という感じで引数なしでご利用下さい。
表示例
表示例です。
