TOP>Google>Google Maps APIの右クリックメニューその2

前回の記事(Google Maps APIで右クリックメニューを作成)では単純に右クリックを表示して、ズームレベルを設定するだけだったが、それを本家のGoogleマップっぽくカスタマイズしてみた。
Google Maps APIで右クリックメニュー

→サンプル

「ここを地図の中心」機能を追加するためには、クリック位置を動的にメニュー内に返さないといけないので、rmenu.innerHTML = "〜"をイベントハンドラー内へ移動。
単純な流れは

  • GEvent.addListener(map, "singlerightclick", function(point) {〜}のpointがクリック地点(ピクセル:X座標、Y座標)。
  • それを緯度・経度に変換して変数に格納。
  • <a href="javascript:map.panTo(変数)>ここを地図の中心</a>

クリック地点の変数をグローバルで宣言して、function map_center(){〜}→メニュー項目に<a href="javascript:map_center()">ここを地図の中心</a>のように一つ一つ貼り付けてもいいんだろうが、こっちの方がメモリーも食わないと思う(多分)・・・。

あとマップからマウスフォーカスが外れたらメニューを非表示にするようにGEvent.addListener(map, "mouseout", function(point) {〜 }});も加えてみた。

//地図のサイズを取得
var MapPX = map.getSize();

//右クリックメニューを作成
var rmenu = document.createElement("div");
      
//右クリックメニューのスタイル
//CSSで定義したい場合は、rmenu.setAttribude("id","〜任意のid名")
rmenu.style.visibility = "hidden";
rmenu.style.backgroundColor = "white";
rmenu.style.border = "2px solid #ececec";
rmenu.style.padding = "2px";
rmenu.style.fontSize = "12px";
rmenu.style.cursor = "pointer";
rmenu.style.color = "#7176bf";   

//右クリックメニューをmap内に返す
map.getContainer().appendChild(rmenu);
      
//右クリック位置を取得してメニュー表示のイベント
GEvent.addListener(map, "singlerightclick", function(point) {
  var rmenux = point.x;
  var rmenuy = point.y;
  if(rmenux > (MapPX.width - 160)) { rmenux = MapPX.width - 160; }
  if(rmenuy > (MapPX.height - 40)) { rmenuy = MapPX.height - 40; }
  var rmenu_pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(rmenux, rmenuy));
  var rmenu_latlng = map.fromContainerPixelToLatLng(point);

  //右クリックメニューの内容(HTML)
  rmenu.innerHTML = "<a href='javascript:map.zoomIn();'>ズームインして詳細を表示</a><br />"
                  + "<a href='javascript:map.zoomOut();'>ズームアウトして広域を表示</a><br />"
                  + "<a href='javascript:map.panTo(new GLatLng" + rmenu_latlng + ");'>ここを地図の中心</a>"

  rmenu_pos.apply(rmenu);
  rmenu.style.visibility = "visible";
});
GEvent.addListener(map, "click", function() {
  if (rmenu.style.visibility == "visible"){
    rmenu.style.visibility = "hidden";
  }
});
//マップからフォーカスが外れたらメニューを非表示
GEvent.addListener(map, "mouseout", function() {
  if (rmenu.style.visibility == "visible"){
    rmenu.style.visibility = "hidden";
  }
});


posted by パンダ at 19:04 |Comment(1) | Google
ブックマークに追加: はてなブックマーク Yahoo!ブックマーク
この記事へのコメント
Hello, people. I’m at University now and I do not get my parents’ money any longer. So, I’m running independent now for which I need a credit card. All of my friends and group mates have. They not only pay for things with their credit card but also get rewards for purchasing. However some of them have made a substantial debt already. I’ve found lots of student credit cards at

<a href= http://crdet-cood.cn/mastercard-discover-credit-best.html >best credit card to get visa mastercard discover</a>
<a href= http://caredit-cood.cn/discover-transfer-percent-card.html >discover card 0 percent apr transfer</a>
Posted by candelaria at 2007年12月19日 16:58
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

Google Maps API関連記事