コントロール

コントロールの概要

Google Maps JavaScript API で表示されるマップには、ユーザーがマップを操作する上で必要な UI 要素が含まれています。これらの要素はコントロールと呼ばれ、さまざまなコントロールをアプリケーションに取り入れることができます。または、何もしないで、コントロールの動作に関するすべての処理を Google Maps JavaScript API に任せることも可能です。

次のマップには、Google Maps JavaScript API によってデフォルトのコントロールセットが表示されています。

例を見る（control-default.html）

以下は、マップで使用できるコントロールの全一覧です。

ズームコントロール は「+」と「-」のボタンから成り、このコントロールを使うとマップのズームレベルを変更できます。デフォルトの表示位置はマップの右下です。
マップタイプコントロールはドロップダウンメニューまたは横並びのボタンバーで表示され、ユーザーはこれを使ってマップタイプ（ROADMAP、SATELLITE、HYBRID、TERRAIN）を選択できます。デフォルトの表示位置はマップの左上です。
ストリートビューコントロールにはペグマンアイコンが表示され、このアイコンをマップにドラッグするとストリビューを表示できます。デフォルトの表示位置はマップの右下です。
回転コントロールを使うと、傾斜のある画像を含むマップの傾きと回転を組み合わせて制御できます。デフォルトの表示位置はマップの右下です。詳細については、45 度画像をご覧ください。
スケールコントロールには、マップのスケール要素が表示されます。デフォルトでは、このコントロールは無効化されています。
全画面表示コントロールによって、マップを全画面モードで表示できます。このコントロールは、モバイル端末ではデフォルトで有効に、PC ではデフォルトで無効になっています。注: iOS は全画面機能をサポートしていないため、iOS 端末では全画面表示コントロールは表示されません。

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

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

デフォルト UI

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

全画面表示コントロールを除いて、コントロールの動作と外観はモバイル端末と PC で変わりません（コントロールの一覧で説明している動作を参照してください）。

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

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

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

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

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

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

例を見る（control-disableUI.html）

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

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

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

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: 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
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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

例を見る（control-simple.html）

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

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

これらのコントロールを変更するには、マップの作成時に 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: ['roadmap', 'terrain']
    }
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

// 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: ['roadmap', 'terrain']
    }
  });
}

例を見る（control-options.html）

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

コントロールの変更

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

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

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

コントロールの配置

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

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

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

TOP_CENTER はコントロールをマップの上端中央に配置するよう指定します。
TOP_LEFT はコントロールをマップの左上に配置し、コントロールのサブ要素を中央上部側へずらして配置するよう指定します。
TOP_RIGHT はコントロールをマップの右上に配置し、コントロールのサブ要素を中央上部側へずらして配置するよう指定します。
LEFT_TOP はコントロールをマップの左上、かつ TOP_LEFT 要素の下に配置するよう指定します。
RIGHT_TOP はコントロールをマップの右上、かつ TOP_RIGHT 要素の下に配置するよう指定します。
LEFT_CENTER はコントロールをマップ左側、かつ TOP_LEFT と BOTTOM_LEFT の中間に配置するよう指定します。
RIGHT_CENTER はコントロールをマップ右側、かつ TOP_RIGHT と BOTTOM_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
    },
    fullscreenControl: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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
    },
    fullscreenControl: true
  });
}

例を見る（control-positioning.html）

カスタムコントロール

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

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

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

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

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

コントロールの描画方法は開発者側にまかされています。一般的にお勧めなのは、すべてのコントロールを 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 の状態変化に反応したり、コントロールにどのような処理をさせるかは開発者が自由に決めることができます。

ユーザーの入力に応答するには、Google Maps JavaScript 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);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

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）

以上で完了です。

コントロールの概要

デフォルト UI

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

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

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

コントロールの変更

コントロールの配置

カスタムコントロール

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

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

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

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

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

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

以上で完了です。

Google Maps JavaScript API をアクティベートする

コントロール

コントロールの概要

デフォルト UI

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

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

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

コントロールの変更

コントロールの配置

カスタム コントロール

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

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

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

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

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

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

カスタムコントロール

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

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

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

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