イベント

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

このページでは、プログラムでリッスンして処理できるユーザーインターフェースイベントとエラーイベントについて説明します。

ユーザーインターフェースイベント

ブラウザ内の JavaScript は「イベント駆動型」です。つまり、JavaScript はイベントを生成することで操作に応答し、プログラムは目的のイベントを「リッスン」します。イベントには、以下の 2 つのタイプがあります。

ユーザーイベント（マウスの「クリック」イベントなど）。DOM から Maps JavaScript API に伝達されます。このイベントは、標準の DOM イベントとは異なる無関係のイベントです。
MVC の状態変化の通知は、Maps API オブジェクトの変化を反映しており、これには property_changed 規則に基づいて名前が付けられています。

各 Maps JavaScript API オブジェクトは、多くの名前付きイベントをエクスポートします。特定のイベントに関連するプログラムは、それらのイベントに対してイベントリスナーを登録します。そして、オブジェクトで addListener() を呼び出してイベントハンドラを登録することで、これらのイベントが受信されたときにコードが実行されるようにします。

以下のサンプルは、マップとインタラクションを行うと、google.maps.Map によって、どのイベントがトリガーされるのかを示します。

すべてのイベントの一覧については、Maps JavaScript API リファレンスをご覧ください。イベントの一覧は、イベントが属しているオブジェクトごとに収録されています。

UI イベント

Maps JavaScript API 内の一部のオブジェクトは、マウスイベントやキーボードイベントなどのユーザーイベントに応答するように設計されています。たとえば、google.maps.Marker オブジェクトがリッスンできるユーザーイベントの一例は次のとおりです。

'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'

すべてのリストについては、Marker クラスをご覧ください。これらのイベントは標準の DOM イベントに似ていますが、実際は Maps JavaScript API の一部です。ブラウザごとに実装している DOM イベントモデルは違うため、さまざまなクロスブラウザ特性に対応しなくても、DOM イベントをリスニングしたり、応答したりできる仕組みが Maps JavaScript API には備わっています。また、通常、これらのイベントは、UI 状態（マウスの位置など）を通知するイベントの中で引数を渡します。

MVC の状態変化

通常、MVC オブジェクトは状態を持ちます。オブジェクトのプロパティが変化すると、Maps JavaScript API はプロパティが変化したというイベントを呼び出します。たとえば、地図のズームレベルが変化すると、API は zoom_changed イベントを呼び出します。これらの状態変化をインターセプトするには、オブジェクトで addListener() を呼び出してイベントハンドラを登録します。

ユーザーイベントと MVC 状態変化イベントは似ていますが、コード内では別々に扱うのが一般的です。たとえば、MVC イベント内では引数を渡しません。MVC の状態変化で変化したプロパティは、そのオブジェクトの適切な getProperty メソッドを呼び出すことによって確認します。

イベント処理

イベント通知の登録には、addListener() イベントハンドラを使用します。このメソッドは引数として、リスニングするイベントと、指定のイベントが発生した際に呼び出す関数を取ります。

例: 地図とマーカーイベント

次のコードには、ユーザーイベントと状態変化イベントの両方が含まれています。クリック時に地図をズームするマーカーに対して、イベントハンドラをアタッチします。また、center プロパティの変更に関するイベントハンドラを地図に追加し、center_changed イベントを受信したら 3 秒後に地図をパン表示してマーカーに戻します。

TypeScript

function initMap(): void {
  const myLatlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatlng,
    }
  );

  const marker = new google.maps.Marker({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.getPosition() as google.maps.LatLng);
    }, 3000);
  });

  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.getPosition() as google.maps.LatLng);
  });
}

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

JavaScript

function initMap() {
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
  });
  const marker = new google.maps.Marker({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.getPosition());
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

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

ヒント: ビューポートの変更を検出したい場合は、指定の bounds_changed イベントを使用してください。その構成要素である zoom_changed や center_changed イベントは使用しないでください。Maps JavaScript API は後者の 2 つのイベントを独立して発生させるので、ビューポートが正しく変更されるまで、getBounds() は有用な結果を報告しない可能性があります。このようなイベントの後に getBounds() を実行する場合は、代わりに bounds_changed イベントをリッスンしてください。

例: シェイプの編集とドラッグイベント

シェイプが編集されたり、ドラッグされたりすると、アクションの完了時にイベントが発行されます。シェイプの一覧とサンプルコードについては、シェイプをご覧ください。

例を表示（rectangle-event.html）

UI イベントの引数にアクセスする

通常、Maps JavaScript API の UI イベントではイベント引数が渡されます。このイベント引数にイベントリスナーがアクセスし、イベント発生時の UI の状態を確認できます。たとえば、一般に UI の 'click' イベントは、クリックされた地図上の位置を示す·latLng プロパティを含む MouseEvent を渡します。この動作は UI イベントに固有で、MVC の状態変化では引数をイベントで渡さないことに注意してください。

イベントリスナー内にあるイベントの引数にアクセスする方法は、オブジェクトのプロパティにアクセスする方法と同じです。以下の例は、地図にイベントリスナーを追加して、ユーザーが地図をクリックすると、その位置にマーカーを作成します。

TypeScript

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

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.Marker({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

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: -25.363882, lng: 131.044922 },
  });

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  new google.maps.Marker({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

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

イベントリスナーでクロージャを使う

イベントリスナーを実行するとき、通常は、オブジェクトにプライベートデータと永続データの両方をアタッチするのが有効です。JavaScript は「プライベート」インスタンスデータをサポートしませんが、クロージャはサポートしており、これによって内部の関数が外部の変数にアクセスできます。クロージャは、イベントが発生したオブジェクトには通常アタッチされていない変数に、イベントリスナー内でアクセスするのに便利です。

以下の例では、イベントリスナー内で関数クロージャを使用して、マーカーのセットに秘密のメッセージを割り当てています。各マーカーをクリックすると、そのマーカー自体には含まれていない秘密のメッセージの一部が表示されます。

TypeScript

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

  const bounds: google.maps.LatLngBoundsLiteral = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.Marker({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
  marker: google.maps.Marker,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.get("map"), marker);
  });
}

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: -25.363882, lng: 131.044922 },
  });
  const bounds = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.Marker({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.get("map"), marker);
  });
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

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

イベントハンドラ内でのプロパティの取得と設定

Maps JavaScript API イベントシステムにおける MVC の状態変化イベントのうち、イベントがトリガーされたときに引数を渡すものはありません（ユーザーイベントは検査可能な引数を渡します）。MVC の状態変化のプロパティを検査する必要がある場合は、そのオブジェクトの適切な getProperty() メソッドを明示的に呼び出す必要があります。この検査で取得されるのは常に MVC オブジェクトの現在の状態であり、イベントが最初に発生したときの状態とは異なる可能性があります。

注: あるプロパティの状態変化に応答するイベントハンドラ内で、そのプロパティを明示的に設定すると、予測できない動作や望ましくない動作が生じる可能性があります。たとえば、そのようなプロパティを設定すると新しいイベントが発生して、そのイベントハンドラ内で必ずプロパティを設定していると無限ループに陥ることがあります。

以下の例では、ズームイベントに応答するイベントハンドラを設定し、そのレベルを情報ウィンドウに表示します。

TypeScript

function initMap(): void {
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

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

JavaScript

function initMap() {
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: originalMapCenter,
  });
  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);
  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom());
  });
}

window.initMap = initMap;index.js

サンプルを表示

サンプルを試す

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

DOM イベントをリッスンする

Maps JavaScript API のイベントモデルは、独自のカスタムイベントを作成して管理します。一方、ブラウザ内の DOM（ドキュメントオブジェクトモデル）も、使用している特定のブラウザイベントモデルに応じて独自のイベントを作成して送信します。このイベントを取得して応答する必要がある場合は、Maps JavaScript API が提供する addDomListener() 静的メソッドを使用すると、DOM イベントをリッスンしてバインドできます。

この便利なメソッドには、以下のシグネチャがあります。

addDomListener(instance:Object, eventName:string, handler:Function)

ここで、instance は、ブラウザがサポートする任意の DOM 要素で、次のようなものがあります:

window や document.body.myform などの DOM の階層構造のメンバー
document.getElementById("foo") などの名前付き要素

addDomListener() は、指定されたイベントをブラウザにそのまま渡すだけです。ブラウザはそのイベントをブラウザの DOM イベントモデルに従って処理します。ただし、ほぼすべての最新のブラウザで、少なくとも DOM レベル 2 がサポートされています（DOM レベルのイベントの詳細については、Mozilla DOM レベルのリファレンスをご覧ください）。

TypeScript

function initMap(): void {
  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

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

JavaScript

function initMap() {
  const mapDiv = document.getElementById("map");
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

window.initMap = initMap;index.js

HTML

<html>
  <head>
    <title>Listening to DOM Events</title>
    <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

サンプルを表示

サンプルを試す

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

上記のコードは Maps JavaScript API コードですが、addDomListener() メソッドはブラウザの window オブジェクトとバインドされており、API の通常のドメイン外でオブジェクトと API がやり取りすることができます。

イベントリスナーを削除する

指定したイベントリスナーを削除するには、変数を割り当てる必要があります。次に removeListener() を呼び出し、そのリスナーに割り当てられた変数名を渡します。

var listener1 = marker.addListener('click', aFunction);

google.maps.event.removeListener(listener1);

特定のインスタンスにあるリスナーをすべて削除するには、clearInstanceListeners() を呼び出して、そのインスタンス名を渡します。

var listener1 = marker.addListener('click', aFunction);
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

特定のインスタンスで、特定のイベントタイプのリスナーをすべて削除するには、clearListeners() を呼び出して、そのインスタンス名とイベント名を渡します。

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

詳しくは、google.maps.event 名前空間のリファレンスドキュメントをご覧ください。

認証エラーをリッスンする

プログラムで認証エラーを検出する場合（ビーコンを自動的に送信するなど）、コールバック関数を作成できます。次のグローバル関数が定義されている場合は、認証エラーが発生すると、その関数が呼び出されます。function gm_authFailure() { /* Code */ };

イベント

ユーザー インターフェース イベント

UI イベント

MVC の状態変化

イベント処理

例: 地図とマーカー イベント

TypeScript

JavaScript

サンプルを試す

例: シェイプの編集とドラッグ イベント

UI イベントの引数にアクセスする

TypeScript

JavaScript

サンプルを試す

イベント リスナーでクロージャを使う

TypeScript

JavaScript

サンプルを試す

イベント ハンドラ内でのプロパティの取得と設定

TypeScript

JavaScript

サンプルを試す

DOM イベントをリッスンする

TypeScript

JavaScript

HTML

サンプルを試す

イベント リスナーを削除する

認証エラーをリッスンする

ユーザーインターフェースイベント

例: 地図とマーカーイベント

例: シェイプの編集とドラッグイベント

イベントリスナーでクロージャを使う

イベントハンドラ内でのプロパティの取得と設定

イベントリスナーを削除する