googlemapsとjavascriptの勉強のため、google地

質問

googlemapsとjavascriptの勉強のため、google地図を表示させてマウスで地図をクリックすると、クリック位置にマーカーを表示するだけのプログラムを作っています。
この際、地図の上にマウスが乗っていると、マーカーがドラッグされている状態に見えると見た目が判りやすいと思ったのですが（googlemapsのマイマップで新規マーカーを置く時にそんなことやってたと思うんですけど）、どうもその方法がわかりません。

マウスカーソルの移動イベントを取って、マウスカーソルの位置に延々とマーカーを表示し続ければそれっぽく見えるかとも思いましたが、Firefoxだとそれっぽく見えますがIEだと処理に負担がかかるのか、動作がイマイチです。

なんとか解決方法が無いものでしょうか。
参考程度ですが、↓のような物です。

<div id="maps" style="width: 500px; height: 500px"></div>
～～～～～～～～～～～～～～～～～～～～
var maps = new GMap2(document.getElementById("maps"));
var ev1 = GEvent.addListener(maps,"click",function(overlay,latlng){
maps.addOverlay(new GMarker(new GLatLng(latlng.lat(),latlng.lng()),{draggable:drag}));
GEvent.removeListener(ev1);
GEvent.removeListener(ev2);
}
var ev2 = GEvent.addListener(maps, "mousemove",function(latlng){
maps.clearOverlays();
maps.addOverlay(new GMarker(latlng));
});

ちょっと漠然としていますが、よろしくお願いいたします。

回答No.3

yyr446 · ベストアンサー

返答おそくなりましたが、
「地図の上にマウスカーソルを持って行くと、マウスカーソルがマーカーをドラッグしてるように見える」
は困難です。マウスカーソルの画像をGMAP内で任意の画像に変える機能は
現行APIバージョンでありません。
その代案として、マーカードラッグとマーカー画像変更を使って似たような
効果をねらっただけです。
No.2の回答で提示したサンプルは、地図上で、ストリートビューを表示させたい箇所を選ばせるコードの一部抜粋と簡略化したものです。
もともとは、GMAP内のGControlに人形のアイコン画像をおいて、それを
GMAP内で引きずると移動中の人形にかわり、止まると普通の人形になり、
そこでクリックすると、そこで確定して、その場所のストリートビュー
を出すというようなコードから抜粋しました。

お礼

仕組み把握しました。ありがとうございます。
なるほど、やはり難しい模様ですね。。。
色々調べてみて、それらしい設定も見当たらなかったので無理矢理組んでみましたが、どうもしっくりこなくて質問した次第でした。

現状では簡易な方法はなさそうですし、一旦〆させていただきます。
参考コード含め、何度もありがとうございました。

回答No.2

yyr446

こんな感じなんですけど、わかりますか？
var SV_icon = new GIcon();
var SV_icon.image ="svmarker.png";　//マーカーの画像
var SV_icon.iconSize = new GSize(22,46);
var SV_icon.iconAnchor = new GPoint(11,46);
var markeropts = {draggable:true,clickable:true,icon:SV_icon};
SV_marker = new GMarker(map.getCenter(),markeropts);
GEvent.addListener(SV_marker, "dragstart", function() {
startpoint=SV_marker.getLatLng();
SV_marker.setImage("svmarker.png");　　//マーカーの画像
});
GEvent.addListener(SV_marker, "drag", function() {
if (SV_marker.getLatLng().lng() > startpoint.lng()){
SV_marker.setImage("svwalk0r.png");　//右移動中マーカーの画像
}else{
SV_marker.setImage("svwalk0.png");　　//左移動中マーカーの画像

}
});
GEvent.addListener(SV_marker, "dragend", function() {
SV_marker.setImage("svmarker.png");　　//マーカーの画像
});
map.addOverlay(SV_marker);

補足

これは、
マーカーを最初から地図上に設置して、マーカーをドラッグをすると3つの[イベント]によってマーカーの画像が切り替わるプログラム、ということですよね？

この方法でどう実現するのかが想像ついていません。意図が違っているかもしれませんので、一度確認させてください。

やりたいことは、

マーカーも何もない地図があります。
地図の上にマウスカーソルを持って行くと、マウスカーソルは　マーカーをドラッグしてる状態に見える（もしくはマウスカーソルの位置にマーカーがついてまわる。最初にこれをやってみていました。もしくはマウスカーソル自体がマーカーの画像になっているとか）。
地図の上でクリックをすると、その位置にマーカーが設置される。ドラッグしてた状態に見えたマウスカーソルは、デフォルトに戻る。
地図に設置された後のマーカーは　draggable:true　なのでドラッグして移動させてもOK。

ということなのですが。
この「地図の上にマウスカーソルを持って行くと、マウスカーソルがマーカーをドラッグしてるように見える」ようにしたく、実際にドラッグしている必要は無いです。

書いてみたら最初に投稿した内容と違ってる印象がありますね。。
何度もすみません。

回答No.1

yyr446

MAPのmousemoveのイベントを拾いつづけるから、たいへんになるのです。
マーカーの方のイベントに着目して、
まず、マーカーはdraggable:true、clickable:trueで作っておきます。
そして、任意の場所にマーカーをおきます。
そして、マーカーの
ドラッグ開始のイベント:dragstart
ドラッグ中のイベント:drag
ドラッグ終了のイベント:dragend
のリスナー関数で
マーカー.setImage(マーカーの画像ファイル)
を使って、それぞれの時のマーカーの画像を変えてやるのです。
ずっとスムーズになるはずです。

もしマーカーを使いたくないなら、mapのカーソルを変える
方法もあります。こちらはMAPのオプション（
draggableCursor）
を使います。
map = new GMap2(document.getElementById("map"),{size:new GSize(640,480),draggableCursor:'move'});
ただし、この方法で指定できるカーソルは、CSSで規定されている
カーソルプロパティの種類のみで、オリジナルの .CUR をURI指定する
方法は、今のところ出来ないみたいです。

補足

ご回答ありがとうございます。
が、申し訳ありません、最初のマーカーを使う項目がよく理解できていません。

mousemoveでないとマウスカーソルの位置がわからないと思ったのですが、これに変わってdragイベントを利用するというのはどういう事なのでしょうか？
マーカーにドラッグイベントを受けられるようにすると（尚且つsetImageで画像を変更すると）、マーカーをドラッグする際に画像が変わる？？ではないですよね・・すいません。
↓のような事をするように見受けられるのですが、、、
～～～～～～～～～～～～～～～～
var option = {draggable:true,icon:icon[0],clickable:true}
var marker = new GMarker(new GLatLng(適当),option);
maps.addOverlay(marker);
～～～～～～～～～～～～～～～～
var ev1 = GEvent.addListener(marker,"drag",function(){
　marker.setImage('画像');
});
～～～～～～～～～～～～～～～～

APIのサンプルを見ながらなので、イベントを利用する方法がまだ理解できていないかもしれません。根本を勘違いしてたらすいません。

2点目の、カーソルを変える方法も調べてみましたが、指定のURI、、例えばgoogleが用意してるようなピンやマーカー等も使えないみたいですね。
スタイルシートでアイコンの変更もできないかと思いましたが、map上ではmapにスタイルが上書きされてしまってるみたいで上手くいきませんでした。
もうちょっと考えてみます。