コントロール

プラットフォームを選択: Android iOS JavaScript

コントロールの概要

Maps JavaScript API によって表示される地図には、ユーザーが地図を使用できるようにする UI 要素が含まれています。こうした要素がコントロールと呼ばれます。アプリケーションには、さまざまなコントロールを組み込むことができます。または何も設定せずに、Maps JavaScript API にすべてのコントロールの動作処理を任せることもできます。

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

以下は、地図で使用できるコントロールの一覧です。

ズームコントロールには、地図のズームレベルを変更する [+] ボタンと [-] ボタンが表示されます。デフォルトの表示位置は地図の右下です。
地図タイプのコントロールは、プルダウンまたは横並びのボタンバーで表示され、ユーザーはこれを使って地図タイプ（ROADMAP、SATELLITE、HYBRID、TERRAIN）を選ぶことができます。このコントロールは、デフォルトでは地図の左上に表示されます。
ストリートビューコントロールはペグマンアイコンで構成されます。このアイコンを地図上にドラッグすると、ストリートビューを有効にすることができます。デフォルトの表示位置は地図の右下です。
回転コントロールを使うと、傾斜のある画像を含む地図の傾きと回転を組み合わせて制御できます。デフォルトの表示位置は地図の右下です。詳しくは 45 度画像をご覧ください。
スケールコントロールでは、地図のスケール要素が表示されます。デフォルトでは、このコントロールは無効化されています。
全画面コントロールでは、全画面モードで地図を開くオプションが表示されます。このコントロールは、デフォルトでは、パソコンとモバイルデバイスで有効になっています。注: iOS は全画面機能に対応していません。iOS デバイスでは全画面コントロールは表示されません。
キーボードショートカットコントロールは、地図を操作するためのキーボードショートカットの一覧を表示します。

これらの地図コントロールは、直接アクセスしたり、変更したりすることはできません。代わりに地図の MapOptions フィールドを変更できます。このフィールドは、コントロールの外観や表示形式を管理します。地図をインスタンス化（適切な MapOptions を使用）してコントロールの表示形式を調整したり、setOptions() を呼び出して地図のオプションを変更し、動的に地図を変更したりできます。

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

デフォルト UI

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

コントロールの動作と外観は、全画面のコントロールを除き、モバイルデバイスとデスクトップデバイスで同一です（動作の詳細はコントロールのリストを参照してください）。

さらに、デフォルトでは、すべてのデバイスでキーボード操作が有効です。

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

API のデフォルトの UI ボタンは、完全にオフにすることもできます。そのためには、地図の disableDefaultUI プロパティ（MapOptions オブジェクト内）を true に設定します。このプロパティを使用すると、Maps JavaScript API のすべての UI コントロールボタンが無効になります。ただし、gestureHandling と keyboardShortcuts プロパティで制御される基本地図でのマウス操作やキーボードショートカットには影響しません。

UI ボタンを無効にするコードは次のとおりです。

TypeScript

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

地図にコントロールを追加する

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 を明示的に無効にしているわけではありません。

TypeScript

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

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

これらのコントロールは、地図の作成時に、MapOptions オブジェクト内で適切なコントロールオプションフィールドを調整することで変更できます。

たとえば、地図タイプのコントロールを変更するオプションは、mapTypeControlOptions フィールドにあります。地図タイプのコントロールは、次のいずれかの style オプションで表示できます。

google.maps.MapTypeControlStyle.HORIZONTAL_BAR は、Google マップ同様に、コントロールを横並びのボタンバーとして表示します。
google.maps.MapTypeControlStyle.DROPDOWN_MENU には単一のボタンコントロールが表示され、プルダウンメニューから地図タイプを選択できます。
google.maps.MapTypeControlStyle.DEFAULT にはデフォルトの動作が表示されますが、この動作は画面サイズによって異なり、今後の API のバージョンで変更される可能性があります。

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

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

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

TypeScript

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const 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"],
    },
  });
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

コントロールは通常、地図の作成時に設定します。ただし、Map の setOptions() メソッドを呼び出して新しいコントロールオプションを渡すことで、コントロールの表示形式を動的に変更できます。

コントロールの変更

コントロールの表示形式は、地図の作成時に地図の MapOptions オブジェクト内のフィールドを使用して指定します。コントロールの外観を指定できます。

zoomControl はズームコントロールの有効、無効を指定します。このコントロールはデフォルトでは地図の右下付近に表示されます。さらに、zoomControlOptions フィールドはこのコントロールで使用する ZoomControlOptions を指定します。
mapTypeControl は、地図タイプ（地図や航空写真など）を切り替える地図タイプのコントロールを有効または無効にします。このコントロールはデフォルトでは地図の左上に表示されます。さらに、mapTypeControlOptions フィールドはこのコントロールで使用する MapTypeControlOptions を指定します。
streetViewControl は、ユーザーがストリートビューパノラマを表示できるペグマンコントロールを有効、無効にします。このコントロールはデフォルトでは地図の右下付近に表示されます。さらに、streetViewControlOptions フィールドはこのコントロールで使用する StreetViewControlOptions を指定します。
rotateControl は、45 度画像の向きを制御する回転コントロールを有効、無効にします。デフォルトでは、現在表示している地域、ズームレベル、地図タイプに対応する 45 度画像が存在する場合に、このコントロールが表示されます。地図の rotateControlOptions を設定して、使用する RotateControlOptions を指定することで、コントロールの動作を変更できます。45 度画像がない場合は、このコントロールを作成できません。
scaleControl は、簡単な地図の縮尺調整機能を表示するスケールコントロールを有効、無効にします。デフォルトでは、このコントロールは非表示です。有効にすると、必ず地図の右下に表示されます。さらに、scaleControlOptions はこのコントロールで使用する ScaleControlOptions を指定します。
fullscreenControl は、全画面モードで地図を開くコントロールを有効、無効にします。このコントロールは、デフォルトではパソコンと Android デバイスで有効になっています。このコントロールを有効にすると、地図の右上付近に表示されます。さらに、fullscreenControlOptions はこのコントロールで使用する FullscreenControlOptions を指定します。

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

コントロールの配置

ほとんどのコントロールオプションには position プロパティ（ControlPosition タイプ）が含まれており、これを使うとコントロールを地図上のどの位置に配置するかを指定できます。これらのコントロールの配置は絶対的なものではありません。代わりに、地図サイズなどの与えられた制約の範囲内で、既存の地図要素や他のコントロールの位置を考慮して、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 は、コントロールが地図の右下に沿って配置されることを示します。コントロールに下位要素がある場合、下中央方向に「並べて」配置されます。

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

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      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,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const 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,
  });
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

カスタムコントロール

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

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

表示するコントロール要素に合った適切な CSS を定義します。
地図プロパティの変更か、ユーザーイベント（'click' イベントなど）用のイベントハンドラを利用して、ユーザーや地図とのインタラクションを処理します。
<div> 要素を作成してコントロールを維持し、この要素を Map の controls プロパティに追加します。

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

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

カスタムコントロールはデベロッパー自身が描画します。通常は、すべてのコントロールの表示形式を 1 つの <div> 要素内に配置して、コントロールを 1 つのユニットとして操作できるようにすることをおすすめします。以下は、この設計パターンを使用した例です。

CSS や DOM の知識があると、より魅力的なコントロールを作成できます。次のコードは、地図をパンしてシカゴを中央に表示するボタン要素を作成する関数です。

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

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

有用なコントロールを作成するためには、なんらかの機能を持たせる必要があります。ユーザーの入力内容に応答したり、Map の状態の変化に応答したり、どのような機能を持たせるかはデベロッパーが考えます。

ユーザーの入力に応答させる場合は、サポートされている DOM イベントを処理できる addEventListener() を使用します。次のコードスニペットにより、ブラウザの 'click' イベントのリスナーが追加されます。このイベントは地図からではなく、DOM から送られてくる点に注意してください。

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

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

カスタムコントロールのアクセシビリティを確保する

コントロールがキーボードイベントを確実に受け取ることができ、スクリーンリーダーで正しく読み取れるようにするための留意点:

ボタン、フォーム要素、ラベルには必ずネイティブ HTML 要素を使用します。DIV 要素は、ネイティブコントロールを格納するコンテナとしてのみ使用します。インタラクティブな UI 要素として流用するべきではありません。
必要に応じて label 要素、title 属性、aria-label 属性を使用し、各 UI 要素についての情報を提供します。

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

カスタムコントロールは、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);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// 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_CENTER].push(centerControlDiv);

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

以下のシンプルなコントロールは（実用性はともかく）、上記のパターンを組み合わせたものです。このコントロールは、地図の中心をデフォルトの特定の場所に合わせることで、DOM の 'click' イベントに応答します。

TypeScript

let map: google.maps.Map;

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

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

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

  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

コントロールに状態を格納することも可能です。次の例は上記の例と似ていますが、コントロールに [Set Home] ボタンを追加します。このボタンは新しいホームの位置を表示するようにコントロールを設定します。そのために、この状態を格納する home_ プロパティをコントロール内に作成し、その状態用のゲッターとセッターを指定しています。

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const 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", () => {
      const currentCenter = this.center_;

      this.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", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

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

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const 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", () => {
      const currentCenter = this.center_;

      this.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", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

コントロール

コントロールの概要

デフォルト UI

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

TypeScript

JavaScript

サンプルを試す

地図にコントロールを追加する

TypeScript

JavaScript

サンプルを試す

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

TypeScript

JavaScript

サンプルを試す

コントロールの変更

コントロールの配置

TypeScript

JavaScript

サンプルを試す

カスタム コントロール

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

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

カスタム コントロールのアクセシビリティを確保する

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

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

TypeScript

JavaScript

サンプルを試す

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

TypeScript

JavaScript

サンプルを試す

カスタムコントロール

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

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

カスタムコントロールのアクセシビリティを確保する

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

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