コントロール

コントロールの概要

Google Maps API で表示されるマップには、ユーザーがマップとインタラクションを行う上で必要な UI 要素が含まれています。これらの要素はコントロールと呼ばれ、Google Maps API アプリではこれらのコントロールのバリエーションを使用できます。代わりに、何もしないで、コントロールの動作に関するすべての処理を Google Maps API に任せることも可能です。

Maps API には、マップ上で使える以下のようなコントロールのセットがあらかじめ組み込まれています。

  • ズーム コントロール は「+」と「-」のボタンから成り、このコントロールを使うとマップのズームレベルを変更できます。デフォルトの表示位置はマップの右下です。
  • マップタイプ コントロールはドロップダウン メニューまたは横並びのボタンバーで表示され、ユーザーはこれを使ってマップタイプ(ROADMAPSATELLITEHYBRIDTERRAIN)を選択できます。デフォルトの表示位置はマップの左上です。
  • ストリートビュー コントロールにはペグマン アイコンが表示され、このアイコンをマップにドラッグするとストリビューを表示できます。デフォルトの表示位置はマップの右下です。
  • 回転コントロールを使うと、傾斜のある画像を含むマップの傾きと回転を組み合わせて制御できます。デフォルトの表示位置はマップの右下です。詳細については、45 度画像をご覧ください。
  • スケールコントロールには、マップのスケール要素が表示されます。デフォルトでは、このコントロールは無効化されています。

これらのマップ コントロールに直接アクセスしたり、変更を加えたりしないでください。コントロールの表示/非表示を切り替えたり、外観を変更したりする場合は、代わりに MapOptions フィールドを編集してください。コントロールの外観を変えるには、(適切な MapOptions を使って)マップをインスタンス化するか、マップを動的に修正するために setOptions() を呼び出してマップのオプションを変更します。

これらのコントロールの一部は、デフォルトでは有効になっていません。デフォルトの UI 動作やその修正方法については、以下のデフォルト UI をご覧ください。

デフォルト UI

非常に小さいマップ(200 x 200 ピクセル)においては、デフォルトですべてのコントロールが非表示になります。この動作を変更するには、コントロールを表示するよう明示的に設定します。詳細は、マップにコントロールを追加するをご覧ください。

コントロールの動作や外観は、モバイル端末とデスクトップ端末で共通しています。

さらに、デフォルトでは、すべての端末においてキーボード操作が有効です。

デフォルト UI を無効にする

API のデフォルトの UI 設定をすべて無効にしたい場合があります。これを行うには、マップの disableDefaultUI プロパティ(MapOptions オブジェクト内)を true に設定します。これで、Google Maps API が自動で設定した UI 動作はすべて無効になります。

以下のコードでは、デフォルトの UI をすべて無効にしています。

function initMap() {
  var mapOptions = {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.getElementById("map"),
       mapOptions);
}

例を見る

マップにコントロールを追加する

UI の動作やコントロールを削除、追加、修正してインターフェースをカスタマイズでき、後続のアップデート後もその状態を保持できます。既存の動作に追加や修正を加えるのみの場合は、必ずコントロールを明示的にアプリに追加してください。

コントロールの中にはデフォルトでマップに表示されるものと、明示的に指定しないと表示されないものがあります。コントロールを追加または削除するには、以下の MapOptions オブジェクトのフィールドを使います。この値を true に設定するとマップにコントロールが表示され、false に設定すると非表示になります。

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean
}

マップのサイズが 200 x 200 ピクセル未満の場合は、デフォルトですべてのコントロールが非表示になります。この動作を変更するには、コントロールを表示するよう明示的に設定します。以下のテーブルは、マップのサイズと zoomControl フィールドの設定値に応じて、ズーム コントロールが表示または非表示のどちらになるかを示した例です。

マップのサイズ zoomControl 表示/非表示
任意 false 非表示
任意 true 表示
200 x 200 ピクセル以上 undefined 表示
200 x 200 ピクセル未満 undefined 非表示

以下の例ではズーム コントロールを非表示に、スケール コントロールを表示するようマップを設定しています。ここではデフォルトの UI の動作に修正を加えているだけで、デフォルトの UI を明示的に無効にしているわけではありません。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

例を見る

コントロールのオプション

コントロールの中には、設定を変更して動作や外観を変更できるものもあります。たとえば、マップ タイプ コントロールは、横並びのバーとドロップダウン メニューのどちらのスタイルでも表示できます。

これらのコントロールを変更するには、マップの作成時に MapOptions オブジェクトの該当するコントロール options フィールドを修正します。

たとえば、マップ タイプ コントロールを修正するには mapTypeControlOptions フィールドでオプションを指定します。マップ タイプ コントロールは、以下のいずれかの style オプションで表示されます。

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR は、Google マップ同様に、横並びのボタンバーのようなコントロールをマップ上に表示します。
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU は、ボタン コントロールを 1 つだけ表示し、ドロップダウン メニューからマップ タイプを選択できるようにします。
  • google.maps.MapTypeControlStyle.DEFAULT は画面サイズに応じてデフォルトのコントロールを表示します。これは今後の API バージョンで動作が変わる可能性があります。

コントロールのオプションを変更する場合は、該当する MapOptions の値を true に設定してコントロールも明示的に有効にする必要があります。たとえば、マップ タイプ コントロールを DROPDOWN_MENU スタイルで表示するには、MapOptions オブジェクト内で以下のコードを使用します。

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

下の例では、コントロールのデフォルトの表示位置とスタイルを変更しています。

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.TERRAIN
      ]
    }
  });
}

例を見る(control-options.html)

一般的にコントロールはマップの作成時に設定されます。ただし、MapsetOptions() メソッドを呼び出し、それを新しいコントロール オプションに渡して、コントロールの外観を動的に変更することもできます。

コントロールの変更

マップの作成時に、マップの MapOptions オブジェクトにある以下のフィールドを使ってコントロールの外観を指定できます。

  • zoomControl はズーム コントロールの有効/無効を指定します。このコントロールはデフォルトでマップの右下辺りに表示されます。zoomControlOptions フィールドは、このコントロールで使用する ZoomControlOptions を追加で指定します。
  • mapTypeControl は、マップ タイプ(地図、衛星写真など)の切り替えに使うマップ タイプ コントロールの有効/無効を指定します。このコントロールはデフォルトでマップの左上に表示されます。mapTypeControlOptions フィールドは、このコントロールで使用する MapTypeControlOptions を追加で指定します。
  • streetViewControl は、ストリートビューのパノラマ画像を表示する際に使うペグマン コントロールの有効/無効を指定します。このコントロールはデフォルトでマップの右下辺りに表示されます。streetViewControlOptions フィールドは、このコントロールで使用する StreetViewControlOptions を追加で指定します。
  • rotateControl は、斜め 45 度画像の向きを制御する回転コントロールの有効/無効を指定します。デフォルトでは、現在表示している地域、ズーム レベル、マップ タイプに対応する 45 度画像が存在すれば、このコントロールは表示されます。コントロールのこの動作を変更するには、マップの rotateControlOptions を設定して、使用する RotateControlOptions を指定します。45 度画像が利用できない場合は、このコントロールを作成できません。
  • scaleControl は、シンプルなマップ スケールを提供するスケール コントロールの有効/無効を指定します。デフォルトでは、このコントロールは非表示です。有効にすると、必ずマップの右下に表示されます。scaleControlOptions フィールドは、このコントロールで使用する ScaleControlOptions を追加で指定します。

なお、初めに無効に設定したコントロールに対しても、オプションの指定は可能です。

コントロールの配置

ほとんどのコントロール オプションには(ControlPosition タイプの)position プロパティが含まれていて、これを使うとコントロールをマップ上のどの位置に配置するかを指定できます。これらのコントロールの配置は絶対的なものではありません。代わりに、マップサイズなどの与えられた制約の範囲内で、既存のマップ要素や他のコントロールの位置を考慮して、API によってうまく配置されます。

:API は最適な配置を目指しますが、元々のレイアウトが複雑な場合は、コントロールが他の要素に重なって表示される可能性もあります。

サポートするコントロールの配置は以下のとおりです。

  • TOP_CENTER はコントロールをマップの上端中央に配置するよう指定します。
  • TOP_LEFT はコントロールをマップの左上に配置し、コントロールのサブ要素を中央上部側へずらして配置するよう指定します。
  • TOP_RIGHT はコントロールをマップの右上に配置し、コントロールのサブ要素を中央上部側へずらして配置するよう指定します。
  • LEFT_TOP はコントロールをマップの左上、かつ TOP_LEFT 要素の下に配置するよう指定します。
  • RIGHT_TOP はコントロールをマップの右上、かつ TOP_RIGHT 要素の下に配置するよう指定します。
  • LEFT_CENTER はコントロールをマップ左側、かつ TOP_LEFTBOTTOM_LEFT の中間に配置するよう指定します。
  • RIGHT_CENTER はコントロールをマップ右側、かつ TOP_RIGHTBOTTOM_RIGHT の中間に配置するよう指定します。
  • LEFT_BOTTOM はコントロールをマップの左下、かつ BOTTOM_LEFT 要素の上に配置するよう指定します。
  • RIGHT_BOTTOM はコントロールをマップの右下、かつ BOTTOM_RIGHT 要素の上に配置するよう指定します。
  • BOTTOM_CENTER はコントロールをマップの中央下部に配置するよう指定します。
  • BOTTOM_LEFT はコントロールをマップ左下に配置し、コントロールのサブ要素を中央下部側へずらして配置するよう指定します。
  • BOTTOM_RIGHT はコントロールをマップ右下に配置し、コントロールのサブ要素を中央下部側へずらして配置するよう指定します。

例を見る(control-positioning-labels.html)

これらの配置は、表示位置が固定された UI 要素(著作権表示や Google ロゴ)と重なる場合があります。その際は、配置ごとに決められているロジックに基づき、コントロールの位置をずらして、指定した位置にできるだけ近い場所に表示します。

以下のシンプルなマップでは、すべてのコントロールを有効にして、別々の位置に配置しています。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  });
}

例を見る(control-positioning.html)

カスタム コントロール

既存の API コントロールのスタイルや配置を変える以外に、ユーザーとのインタラクションを処理する独自のコントロールを作成することもできます。下にあるマップと連動して動くオーバーレイと違って、コントロールは静的なウィジェットなので、マップ上の絶対位置に表示されます。基本的にコントロールはシンプルな <div> 要素で、マップ上の絶対位置に配置されます。ユーザーに対して UI を表示し、通常はイベントハンドラーを介してユーザーやマップとのインタラクションを処理します。

独自のカスタム コントロールを作成する上での規則はほとんどありませんが、ベスト プラクティスとして、以下のガイドラインに従うことをお勧めします。

  • 表示するコントロール要素に対して適切な CSS を定義する。
  • マップ プロパティの変更時やユーザー イベント('click' イベントなど)の発生時は、イベント ハンドラーを介してユーザーやマップとのインタラクションを処理する。
  • コントロールを保持する <div> 要素を作成して、この要素を Mapcontrols プロパティに追加する。

それぞれの詳しい内容については以下をご覧ください。

カスタム コントロールを描画する

コントロールの描画方法は開発者側にまかされています。一般的にお勧めなのは、すべてのコントロールを 1 つの <div> 要素に配置する方法です。そうすることでコントロールを 1 つのユニットとして操作できます。以下は、この設計パターンを使用した例です。

CSS や DOM の知識があると、より魅力的なコントロールを作成できます。以下のコードでは、コンテナ用の <div>、ボタンのアウトラインを保持する <div>、ボタンの中身を保持する <div> を使って、シンプルなコントロールを作成しています。

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

カスタム コントロールからのイベントを処理する

実際に処理を行うからこそコントロールに価値が生まれます。ユーザーの入力に応答したり、Map の状態変化に反応したり、コントロールにどのような処理をさせるかは開発者が自由に決めることができます。

ユーザーの入力に応答するには、Maps API に含まれる addDomListener() というクロスブラウザ ハンドリング メソッドを使います。このメソッドは、ブラウザがサポートする DOM イベント の大半を処理できます。以下のコード スニペットでは、ブラウザの 'click' イベント用のリスナーを追加しています。このイベントはマップからではなく、DOM から送られてくる点に注意してください。

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

カスタム コントロールの配置

カスタム コントロールをマップ上に配置するには、Map オブジェクトの controls プロパティ内で適切な位置に配置します。このプロパティには、google.maps.ControlPosition の配列も含まれます。カスタム コントロールをマップに追加するには、Node(一般には <div>)を適切な ControlPosition に追加します。(配置に関する詳細は、上記のコントロールの配置をご覧ください)。

ControlPosition は、その位置に表示されるコントロールの MVCArray を保持しています。よって、コントロールがその位置に追加または削除された場合は、それに応じて API がコントロールを更新します。

API は index プロパティの値が小さいコントロールから順に、各位置に配置します。たとえば、BOTTOM_RIGHT に配置するカスタム コントロールが 2 つあった場合は、インデックスの値が小さいコントロールが先に配置されます。デフォルトでは、API のデフォルトのコントロールがすべて配置されたで、カスタム コントロールが配置されます。この動作を変更するには、コントロールの index プロパティを負の値に設定します。なお、カスタム コントロールはロゴの左や著作権表示の右に配置することはできません。

以下のコードでは、新規にカスタム コントロールを作成し(コンストラクタは省略)、それをマップの TOP_RIGHT 位置に追加しています。

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

カスタム コントロールの例

以下のシンプルなコントロールは(実用性はともかく)、上記のパターンを組み合わせたものです。このコントロールは DOM の 'click' イベントに応答して、デフォルトの地域にマップをセンタリングします。

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl() constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

例を見る(control-custom.html)

コントロールに状態を追加する

コントロールに状態を保管することも可能です。以下の例は以前紹介したものと似ていますが、こちらはコントロールに [Set Home] ボタンが追加されています。このボタンによって、コントロールが新しい家の位置を表示するように設定できます。そのためには、コントロール内に home_ プロパティを作成してこの状態を保管し、この状態用に getter および setter を提供します。

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of the
  // control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl() constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

例を見る(control-custom-state.html)

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。