キーボード操作のみは可能でしょうか?

131 views
Skip to first unread message

mappy

unread,
Jan 26, 2006, 3:56:33 AM1/26/06
to Google-Maps-API-Japan
現在、google maps API
を自分のサイト内で使用したいと思っており、キーボードのみで操作ができるようにするにはどうすればよいでしょうか?

地図は、ページの中でインラインフレーム(iframe)を使って呼び込んで使おうと思っております。(というより、インラインフレームを使わないと、表示できないようなので・・・)

色々と試してみましたが、マウス操作しかできないので、キーボード操作のやり方(設定の仕方)を教えてください。

お願いいたします。

noki

unread,
Jan 26, 2006, 12:36:32 PM1/26/06
to Google-Maps-API-Japan
onKeyPressとかのイベントを使ったらキーボードで操作できそうな気がします。

Nao@Locapoint

unread,
Jan 26, 2006, 11:10:27 PM1/26/06
to Google-Maps-API-Japan
Google
Mapsの本家サイトはキー操作は効きますが、GoogleMapsAPIを使って自分のサイトに地図を組み込んだ場合、キーは効きません。

iframeを使わないと表示ができない、という状況がどういうものか分からないのですが、nokiさんのいわれるようにonKeyPressでイベントを定義してあげる必要があります。

私のサイト「DIYマップ」はFireFoxとIEでキーイベントが効くようにしてあります。そこのJavaScriptを参考にして頂けたらと思います。http://www.locapoint.com/publicutil/diymap_J.html
です。

ちなみにKeyイベントが定義してあるファイルはヘッダでインクルードしている「http://www.locapoint.com/common/LocapointDIYMap.13.js」というファイルです。

あと、KsGMapさんが公開されているスクリプトも大変参考になります。

お力になれば。

mappy

unread,
Jan 27, 2006, 12:33:22 AM1/27/06
to Google-Maps-API-Japan
NOKIさん、Nao@Locapointさん、ありがとうございます!

やはり、皆さんがおっしゃるように、スクリプトを使う方法がよいみたいですね。
参考になるURLまで回答をして頂き、感謝申し上げます。

早速、参考にさせていただきます、本当にありがとうございます!


※iframeに関してですが、iframeを使わずにページに直接呼び出そうとするとエラー(「インターネットサイト
http://・・・・・・・・・・・・html
を開けません。操作は中断されました」という警告)が出てしまい、インラインフレームを経由して呼び出す方法にすればエラー表示はなくなったので、インラインフレーム経由でマップを埋め込んだ方が安全かと思い、irameを使っています。
(本当はフレームは使いたくなかったのですが、直接埋め込むとエラーがなくならなかったので仕方なく・・といったところです。)

Nao@Locapoint

unread,
Jan 27, 2006, 4:42:50 AM1/27/06
to Google-Maps-API-Japan
mappyさん、
先ほどお知らせしたjsファイルは、あまりにもごちゃごちゃしすぎていて、とても人様に「見てください」とはいえるようなものではありませんでした・・・・・ので、キーボード&ホイールイベント以外の部分は削ったものを作りました。このファイルをヘッダへインクルードして、あとは少し調整すれば動くと思います。
ここでは本来のキー操作以外にシフト+上下矢印でズーム、シフト+「M」「S」「H」でマップ、サテライト、ハイブリッドの切り替えも割り付けてあります。

もともと私も初心者で、このグループやあちこちのサイトでアドバイスを頂きながら、ライセンスフリーのコードをつぎはぎして作ったものです。当然ライセンスフリーですからよろしければお使い下さい。
http://www.locapoint.com/common/keynadwheelevent.js

mappy

unread,
Jan 29, 2006, 10:19:25 PM1/29/06
to Google-Maps-API-Japan
Nao@Locapointさん

色々とアドバイスして頂き、本当に有難うございます。
お作り頂いたjsファイル、使わせて頂きます!

そこで、早速組み込んでみたところ・・・
現在私のページでは、

マーカー(おたまじゃくしのような形をした現在地を示すもの)

インフォウインドウ(吹き出しの中に説明を書くことができる)
を表示させているのですが、それらを表示させると、一部ぎこちない動きをするところがありました。
どこでもよいのですが矢印キーで動かした後、マーカーのついている場所まで矢印キーで戻そうとすると、マーカーの所でひっかかったような動きをし、元の位置まで戻すことができません。。(マウスを使うと戻せますが・・)

以下に、頂いたjsファイルの中でソースを書き換えた部分を載せておりますので、
よろしければご教授いただけると助かります。
よろしくお願いいたします。

------------------------------------------------------------------------------------------------------------------------
window.onload = function ()
{
env = new LPGmapEnv();

//prepare GoogleMap
map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.centerAndZoom(new GPoint(130.4180896282196, 33.59016138476819),
1);
var point = new GPoint(130.41694164276123, 33.58952683450143);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0,-20);
map.openInfoWindow(map.getCenterLatLng(),
document.createTextNode("東京駅"), offset);

//Key
Event ここでキーイベント、ホイールイベントを割り付けます。
------------------------------------------------------------------------------------------------------------------------


※上記の 『var point ~ //Key
Event』 の間を付け加えています。
この部分を外せば、問題なく動いてくれるのですが・・・
他の部分を変えてしまうと、元に戻らなくなってはいけないと思い、触れておりません。(何せ初心者なもので・・・)

Reply all
Reply to author
Forward
0 new messages