コントロール

コントロールの概要

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 を作成して地図に追加されている追加のマップ タイプを調整します。

// define the crosshair tile layer and its required functions
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);

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

// Create a new map type incorporating the tile layer
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();

// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");

// Add control after you've specified the relationships
map.addControl(mapControl);

map.addControl(new GLargeMapControl());

例を表示 (control-initialization.html)

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

Google Maps API では、GControl をサブクラス化して、カスタム マップ コントロールを作成することもできます(厳密には、Javascript では継承するのではなく、 GControl オブジェクトのインスタンスを prototype に設定します。

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

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

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

// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).

// We define the function first
function TextualZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
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("Zoom In"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

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

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

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
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)