キーボードを使った地図のコントロールの有効/無効

広告

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

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

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

デフォルトではキーボードによる操作は有効となっていますが無効に設定することもできます。無効に設定するにはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「keyboardShortcuts」プロパティに"false"を設定して下さい。(MapOptionsオブジェクトについては「地図の作成」を参照して下さい)。 

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    keyboardShortcuts: false
};

これでキーボードによる操作が無効となります。もし明示的に有効にしたい場合には"true"を設定して下さい。

サンプルコード

では実際に試してみます。 

var map;

function initialize() {
  var latlng = new google.maps.LatLng(34.370645,134.807739);
  var opts = {
    zoom: 10,
    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);
}

<!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 JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code1_1.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="yuko" value="有効" onclick="toEnable()" />
    <input type="button" id="muko" value="無効" onclick="toDisable()" />
    </p>
    </form>
  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p1-1

キーボードによる操作が有効になっているので矢印キーなどで地図を動かすことができます(ただし最初に地図を一度クリックしてからでないと操作できません)。

地図下にあるボタンを押すことでキーボードによる操作を有効にしたり無効にしたりできます。ただこちらも設定を変更した後でタブなどを使って再度地図にフォーカスを与える必要があります。

( Written by Tatsuo Ikura )