コントロール

コントロールの概要

http://maps.google.co.jp の地図には、ユーザーが地図で操作できる UI 要素があります。これらの要素は「コントロール」と呼ばれており、Google Maps API アプリケーションにはさまざまなコントロールを組み込むことができます。GControl クラスをサブクラス化して独自のカスタム コントロールを作成することもできます。

Maps API には、地図で使用できる次のような組み込みコントロールが付属しています。

• GLargeMapControl - Google マップ上で使用する大きなドラッグ/ズームコントロール。デフォルトでは地図の左上に表示されます。
• GSmallMapControl - Google マップ上で使用する小さなドラッグ/ズームコントロール。デフォルトでは地図の左上に表示されます。
• GSmallZoomControl - ドラッグ コントロールがない小さなズーム コントロール。Google マップで、車のルートの順序を示す小地図のブローアップ ウィンドウ内で使用されています。
• GScaleControl - 地図の縮尺
• GMapTypeControl - マップ タイプ (地図や航空写真など) をユーザーが切り替えるためのボタン
• GHierarchicalMapTypeControl - 多くのマップ タイプ セレクタを配置するための入れ子になったボタンとメニュー アイテム
• GOverviewMapControl - 画面の隅にある最小化可能な全体図

これらのコントロールはすべて GControl オブジェクトをベースにしています。

GMapTypeControl と GHierarchicalMapTypeControl は構成可能でもあるため、特殊なケースです。これらのコントロールは、Google Maps API 内のマップで現在使用されている GMapType を変更する機能を追加します。これらのコントロールの設定の詳細については、標準のコントロールのマークアップを変更を参照してください。

以下は、現在サポートされているマップ タイプのリストです。

• G_NORMAL_MAP は、Google マップの通常のデフォルトである2D タイルを表示します
• G_SATELLITE_MAP は写真タイルを表示します
• G_HYBRID_MAP は、写真タイルと主要な機能 （道路、地名） のタイル レイヤを組み合わせて表示します
• G_PHYSICAL_MAP 地形情報に基づいて物理的なマップ タイルを表示します

定義済みの写真またはオーバーレイがある場合、独自のカスタム マップ タイプを定義することもできます。

ただし、Google Maps API では、G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP という 3 つのマップ タイプもサポートされています。マップで使用できるマップ タイプは、GMap2.removeMapType() を介して削除する、または GMap2.addMapType() を介して追加することで変更できます。マップ タイプのコントロールを作成すると、コントロールは常に現在添付されているマップ タイプを使用し、コントロールを介して使用できるようにします。マップ タイプのコントロールがこれらの関係を取得するようにするには、コントロールを追加する前に、マップ タイプ間の関係を指定する必要があります。

以下のコードは、マップに添付されている使用可能なマップ タイプから G_HYBRID_MAP を削除し、2 つのマップ タイプだけを残します。GMapTypeControl を追加すると、使用できるのはこれらの 2 つのマップ タイプのみになります。

var map = new GMap2(document.getElementById("map_canvas"),
  { size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());

例を表示 (control-maptypes.html)

地図へコントロールを追加

コントロールは、GMap2 メソッドの addControl() を使用して地図に追加します。 たとえば、Google マップ上に表示されるドラッグ/ズーム コントロールをユーザーの地図に追加するには、地図の初期化に次の行を追加する必要があります。

map.addControl(new GLargeMapControl());

地図には複数のコントロールを追加することができます。ここでは、組み込みの GSmallMapControl コントロールと GMapTypeControl コントロールを追加します。これらのコントロールより、それぞれ地図のドラッグ/ズームや、地図モードと航空写真モードの切り替えができるようになります。標準のコントロールは、地図に組み込めばすぐに使用できるようになります。

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

例を表示 (control-simple.html)

地図上のコントロールの位置を指定

addControl メソッドは、オプションで 2 番目の GControlPosition パラメータを取り、このパラメータで地図上でのコントロールの位置を指定します。このパラメータには、コントロールを配置する地図の角を表す次のいずれかの値を指定できます。

• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_BOTTOM_LEFT

この引数がない場合、Maps API はコントロールに定められているデフォルトの位置を使用します。

GControlPosition には、オプションで地図の端からコントロールの位置までのピクセル数を示すオフセットを指定できます。 このオフセットは、GSize オブジェクトを使用して指定します。

この例では、GMapTypeControl を地図の右上から 10 ピクセル離れた位置に追加します。地図上の任意の場所をダブルクリックすると、そのコントロールが削除され地図の右下に配置されます。

var map = new GMap2(document.getElementById"map_canvas"));
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
  map.removeControl(mapTypeControl);
  map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

例を表示 (control-positioning.html)

詳細については、 GControlPositionクラス リファレンスを参照してください。

標準のコントロールのマークアップを変更

Google Maps API 内のコントロールは、ほとんどが標準動作を備えた単純なコントロールです。ただし、一部のコントロールの中には正常に使用するために初期化を必要とするものもあります。たとえば、GHierarchicalMapTypeControl では、通常、カスケード「メニュー」内のマップ タイプを正しい順序で表示するために初期化が必要です。

次の例では、十字のタイル レイヤ オーバーレイを持つ G_PHYSICAL_MAP マップ タイプを地図に追加し、GHierarchicalMapTypeControl を作成して地図に追加されている追加のマップ タイプを調整します。

// 十字のタイル レイヤと、その必須機能を定義します
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);

crossLayer.getTileUrl =  function(tile, zoom) {
  return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;}

// タイル レイヤを組み込む新しいマップ タイプを作成します
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
  G_PHYSICAL_MAP.getProjection(), "Ter+");

var map = new GMap2(document.getElementById("map_canvas"), 
  { size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();

// マップ タイプのメニュー関係を設定します
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");

// 関係を指定した後で、コントロールを追加します
map.addControl(mapControl);

map.addControl(new GLargeMapControl());

例を表示 (control-initialization.html)

カスタム マップ コントロール

Google Maps API では、GControl をサブクラス化してカスタム マップ コントロールを作成することもできます (技術的には、JavaScript でオブジェクトを「subclass」にするのではなく、prototype オブジェクトを GControl オブジェクトのインスタンスに割り当てます)。

有効なカスタム コントロールを作成するには、そのクラスの少なくとも2つのメソッド (initialize() と getDefaultPosition()) にハンドラを定義する必要があります。initialize() メソッドでは DOM 要素を返す必要があり、getDefaultPosition() メソッドではタイプ GControlPosition のオブジェクトを返す必要があります。

すべてのマップ コントロールは、GMap2 の getContainer() メソッドによってアクセスできるマップ「コンテナ」に追加する必要があります。

この例では、Google マップの標準のズーム コントロールに使用されているグラフィック アイコンではなく、テキストリンク形式の単純なズーム コントロールを作成します。

// TextualZoomControl は GControl であり、「Zoom In」と「Zoom Out」というテキストのボタンを表示します （Google マップで使用されているアイコン ボタンとは対照的です）。

// 最初に関数 TextualZoomControl() {} を定義します

// GControl を「subclass」にするには、prototype オブジェクトを Gcontrol オブジェクトのインスタンスに設定します
TextualZoomControl.prototype = new GControl();

// 各ボタンに対して1つの DIV を作成し、
// コントロール要素として返されるコンテナ DIV に格納します。そのコントロールをマップ コンテナに追加し、マップ クラスの要素を返して適切な位置を指定します。
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("詳細"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("広域"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

// デフォルトでは、このコントロールが地図の左上から 7 ピクセル離れた位置に表示されます。
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// 指定されたボタン要素に対して適切な CSS を設定します。
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);

例を表示 (control-custom.html)