検索結果の表示方法

広告
facebookボタン
googleplusボタン
twitterボタン
ダミーボタン
bloggerボタン
このページに記載されている内容はGoogle Maps API V2用のものであり、最新バージョンのものとは違います。ご注意下さい。

Google検索コントロールで検索を行った場合、検索結果の一覧が地図内の検索コントロールの上部に表示されます。この表示方法を変更する方法を確認します。

検索結果をどのように表示するのかを設定するにはGGoogleBarOptionsクラスのresultListプロパティを使用します。 

resultListプロパティ

このプロパティにより、GoogleBar の検索結果リストのスタイルを指定できま
す。スタイルには、検索ボックスの上の表に結果リストを配置する 
G_GOOGLEBAR_RESULT_LIST_INLINE (デフォルト)、順送り/逆送りボタンのセット
とリストを置き換える G_GOOGLEBAR_RESULT_LIST_SUPPRESS、ブロックレベル 
DOM を渡すと選択したコンテナ内にリストを配置する Element (通常は <div> 
要素) があります。

値：
  GGoogleBarResultList or Element

resultListプロパティに指定可能な値は次のいずれかです。

定数説明
G_GOOGLEBAR_RESULT_LIST_INLINE結果リストが地図上に表形式で表示
G_GOOGLEBAR_RESULT_LIST_SUPPRESS結果リストが非表示で、代わりに順送り/逆送りボタンが配置

デフォルトの値であるG_GOOGLEBAR_RESULT_LIST_INLINEを指定すると、検索結果は表形式で検索コントロールの上部に表示されます。G_GOOGLEBAR_RESULT_LIST_SUPPRESSを指定すると、検索結果リストは表示されずボタンをクリックすることで順に結果を切り替えていきます。いずれの場合でも地図上に検索結果の位置を表すマーカーは表示されます。

またG_GOOGLEBAR_RESULT_LIST_INLINEなどを指定する代わりに別途用意したdiv要素を指定すると、検索結果を表形式で引数に指定したdiv要素に表示します。

具体的には次のように記述します。 

var goption = {resultList:G_GOOGLEBAR_RESULT_LIST_SUPPRESS};
var option = {googleBarOptions:goption};
var map = new GMap2(document.getElementById("map"), option);

又は次のようにdiv要素を指定することもできます。 

var goption = {resultList:document.getElementById("resultdiv")};
var option = {googleBarOptions:goption};
var map = new GMap2(document.getElementById("map"), option);

サンプル

では試してみます。

code4_1.js 

function initialize() {
  if (GBrowserIsCompatible()) {
    var gopts = {showOnLoad:true, resultList:G_GOOGLEBAR_RESULT_LIST_SUPPRESS};
    var opts = {googleBarOptions:gopts};
    var map = new GMap2(document.getElementById("map_canvas"), opts);
    map.setCenter(new GLatLng(35.698249,139.773152), 15);

    map.enableGoogleBar();
  }
}

map4_1.html 

<!DOCTYPE html "-//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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：検索結果の表示方法</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code4_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p4-1

Google検索コントールで「本屋」と検索してみます。

p4-2

今回はresultListプロパティにG_GOOGLEBAR_RESULT_LIST_SUPPRESSを指定しているため、順送りボタンと逆送りボタンが表示されます。このボタンを押すことで検索結果を順にめぐることが出来ます。

p4-3

p4-4

サンプル

ではもう一つ試してみます。

code4_2.js 

function initialize() {
  if (GBrowserIsCompatible()) {
    var gopts = {showOnLoad:true, resultList:document.getElementById("resultdiv")};
    var opts = {googleBarOptions:gopts};
    var map = new GMap2(document.getElementById("map_canvas"), opts);
    map.setCenter(new GLatLng(35.698249,139.773152), 15);

    map.enableGoogleBar();
  }
}

map4_2.html 

<!DOCTYPE html "-//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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：検索結果の表示方法</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code4_2.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
    <div id="resultdiv" style="width: 400px; height: 100px"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p4-5

Google検索コントールで「CS」と検索してみます。

p4-6

今回はresultListプロパティに地図の外に設置したdiv要素を指定しているため、検索結果のリストは指定したdiv要素に表示されます。なお、div要素のwidthプロパティの値に合わせて結果の幅は決まりますが、heightプロパティの値が指定してあっても検索結果が収まらない場合はdiv要素の高さは自動的に調整されて全ての検索結果が表示されます。

( Written by T.buzz.Ikura+ )

Social Button
Facebook Page