キーボードで地図を操作できるようにする
（注意！）この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。
ここではキーボードを使って地図を動かせるようにする方法を説明したいと思います。 通常のGoogle Mapsではキー操作で地図が動かせますが、Google Maps APIを使った場合、初期設定ではキー操作が出来なくなっています。 Google Maps APIを使う地図で、キー操作をできるようにするにはGKeyboardHandlerを使います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。 キー操作を有効にするのは非常に簡単です。 new GKeyboardHandler(GMap2)を行うだけです。
<!DOCTYPE html PUBLIC "-//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>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:500px; height:450px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(36.03, 139.15);
map.setCenter(point, 10);
new GKeyboardHandler(map);
map.addOverlay(marker);
}
//]]>
</script>
</body>
</html>
表示例
表示例です。 以下のキー操作で移動できます。
| ↑↓←→ | 指定した方向へ地図を移動させます。 押し続けることにより、連続的な移動が実現可能です。 2つのキーを同時に押して斜め方向に移動させることも可能です。 |
| page down, page up, home, end | 地図サイズの3/4の距離を移動します。 GLargeMapControlやGSmallMapControlで表示される矢印ボタンと同じ動作です。 |
| +, - | ズームを行います。 GLargeMapControlやGSmallMapControlのプラスとマイナスボタンと同じ動作です。 |
IFRAMEで表示した地図ではキーボード操作が手前のウィンドウに奪われてしまうので、下記リンク先を開いてご覧下さい。
