検索入力ボックスの表示/非表示

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

Google検索コントロールを表示した時に、初期状態として検索する文字列を入力する入力ボックスの部分を表示するかどうかを設定する方法を確認します。GGoogleBarOptionsクラスのshowOnLoadプロパティを使用します。

showOnLoadプロパティ

true に設定されている場合、このプロパティは検索ボックスを GoogleBar 内に
表示します (コントロールが有効になっており、地図がロードされている場合)。
デフォルトでは、コントロール内の検索ボックスは非表示になっており、コント
ロールの虫めがねのアイコンをクリックすると表示されます。

値：
  Boolean

showOnLoadプロパティにtrueを設定すると検索入力ボックスを表示します。falseに設定すると検索入力ボックスは非表示となります。いずれの場合もGoogle検索コントロール上の虫めがねアイコンをクリックすることで表示と非常時を切り替えることができます。

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

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

上記の場合はGoogle検索コントールを表示した時に、初期状態として検索入力ボックスを表示します。

サンプル

では試してみます。

code2_1.js

function initialize() {
  if (GBrowserIsCompatible()) {
    var gopts = {showOnLoad:false};
    var opts = {googleBarOptions:gopts};
    var map = new GMap2(document.getElementById("map_canvas"), opts);
    map.setCenter(new GLatLng(36.926498,139.306469), 13);

    map.enableGoogleBar();
  }
}

map2_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/code2_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を見てみます。

p2-1

今回showOnLoadプロパティにfalseを設定しているため、地図の画面左下に検索コントロールが表示されますが、文字列を入力するための検索入力ボックスは表示されていません。

検索入力ボックスを表示するには検索コントロールに表示されている虫めがねアイコンをクリックして下さい。

p2-2

p2-3

検索入力ボックスが表示されました。showOnLoadプロパティにtrueを設定するとこの状態から開始となります。

この状態で検索コントールに表示されている虫めがねアイコンをクリックすると検索入力ボックスが非常となります。

p2-4

p2-5

( Written by T.buzz.Ikura+ )

Social Button

Facebook Page