• 小
  • 中
  • 大

キーボードでのコントロール

Google Maps APIを使って作成した地図に対して、利用者は主にマウスを使って移動したりズームレベルを変更しますが、キーボードからも同じような操作を行うことができます。

プロパティタイプ説明
keyboardShortcutsbooleanfalse の場合、地図をキーボードでコントロールすることはできません。デフォルトでは、キーボード ショートカットは有効になっています。

キーボードによる地図の操作として次のようなものが定義されています。

上矢印キー    上へ移動
下矢印キー 下へ移動
左矢印キー 左へ移動
右矢印キー 右へ移動
PageDown 上へ3/4ページ移動
PageUp 下へ3/4ページ移動
Home 左へ3/4ページ移動
End 右へ3/4ページ移動
+ ズームイン
- ズームアウト

無効に設定するにはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「keyboardShortcuts」プロパティに"false"を設定します。
  var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
keyboardShortcuts: false
};

これでキーボードによる操作が無効となります。デフォルトでは、キーボード ショートカットは有効になっていますので有効にしたい場合特に意識する必要はありませが、明示的に設定する場合は"true"を設定します。

サンプルコード

サンプル.js


var map;

function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
keyboardShortcuts: true
};
map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
}

function toEnable() {
var opts = {
keyboardShortcuts: true
};
map.setOptions(opts);}

function toDisable() {
var opts = {
keyboardShortcuts: false
};
map.setOptions(opts);
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<form><p>
<input type="button" id="Effective" value="有効"
onclick="toEnable()" />
<input type="button" id="Invalidity" value="無効"
onclick="toDisable()" />
</p></form>
</body>
</html>


表示例 キーボード コントロールを 無効/有効 の切り替え


Google Maps サンプル > キーボード コントロールを 無効/有効 の切り替える