Google検索コントールの表示

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

まず地図上にGoogle検索コントールの表示する方法を確認します。

まず最初にGMap2クラスのオブジェクトを作成する時に、コンストラクタ関数の2番目の引数にオプションを指定します。

GMap2(container:Node, opts?:GMapOptions)

2番目の引数はGMapOptionsクラスのオブジェクトを指定します、このクラスはコンストラクタ関数が用意されていませんのでオブジェクトリテラルを作成します。

var opts = {プロパティ名:値, プロパティ名:値, ...};

Google検索コントロールを表示する場合は、googleBarOptionsプロパティに対してGGoogleBarOptionsクラスのオブジェクトを指定します。

var opts = {googleBarOptions:GGoogleBarOptionsクラスのオブジェクト};

GGoogleBarOptionsクラス

GGoogleBarOptionsクラスもコンストラクタ関数が用意されていませんのでオブジェクトリテラルを作成します。

var gopts = {プロパティ名:値, プロパティ名:値, ...};

GGoogleBarOptionsクラスで定義されているプロパティについて詳細は別のページで確認します。今回はshowOnLoadプロパティに対してtrueだけを指定します。

var gopts = {showOnLoad:true};

以上をまとめるとGoogle検索コントロールを使用できるような地図を作成するには次のように記述します。

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

これでGoogle検索コントールを使うことができる地図が作成できました。

Google検索コントロールを有効にする

続いてGoogle検索コントロールを有効にします。Google検索コントロールを有効にするにはGMap2クラスで用意されているenableGoogleBarメソッドを使います。

enableGoogleBar()

統合検索コントロールである GoogleBar を地図に対して有効にします。有効に
なると、デフォルトの「Google」ロゴに代わってこのコントロールが表示され
ます。このコントロールはデフォルトで無効になっています。

デフォルトで無効となっているGoogle検索コントロールをenableGoogleBarメソッドを実行することで有効にすることができます。

なお有効になったGoogle検索コントロールを無効にするにはGMap2クラスで用意されているdisableGoogleBarメソッドを使います。

disableGoogleBar()

GoogleBar 統合検索コントロールを無効にします。無効になると、このコント
ロールのあった位置にデフォルトの Google ロゴが表示されます。このコント
ロールは、デフォルトで既に無効になっています。

実際には次のように記述します。

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

map.enableGoogleBar();

Google検索コントロールを表示すると、地図上で通常Googleロゴが表示されている箇所にGoogle検索コントロールが表示されます。

サンプル

では試してみます。

code1_1.js

function initialize() {
  if (GBrowserIsCompatible()) {
    var gopts = {showOnLoad:true};
    var opts = {googleBarOptions:gopts};
    var map = new GMap2(document.getElementById("map_canvas"), opts);
    map.setCenter(new GLatLng(35.68069,139.766951), 14);

    map.enableGoogleBar();
  }
}

map1_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>サンプル：Google検索コントールの表示</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/code1_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を見てみます。

p1-1