Google Mapsに右クリックメニューを追加する方法。このコードのメニューの中身はズームレベルを変えるだけだが、応用すれば色々な使い方があると思う。
//地図の中心を取得。 //Google Maps APIで中心の十字架を表示を併用する場合はそちらの方にある「var MapPX = map.getSize();」を削除。 var MapPX = map.getSize(); //右クリックメニューを作成 var rmenu = document.createElement("div"); //右クリックメニューのスタイルを設定。 rmenu.style.visibility = "hidden"; rmenu.style.backgroundColor = "white"; rmenu.style.border = "2px solid black"; rmenu.style.padding = "2px"; rmenu.style.fontSize = "12px"; rmenu.style.cursor = "pointer"; //右クリックメニューの内容(HTML） rmenu.innerHTML = "<div style='padding:2px' onclick='map.setZoom(2)'>Zoom(2)</div>" + "<div style='padding:2px' onclick='map.setZoom(6)'>Zoom(6)</div>" + "<div style='padding:2px' onclick='map.setZoom(10)'>Zoom(10)</div>" + "<div style='padding:2px' onclick='map.setZoom(16)'>Zoom(14)</div>" + "<div style='padding:2px' onclick='map.setZoom(16)'>Zoom(18)</div>" //右クリックメニューをmap内に返す map.getContainer().appendChild(rmenu); //右クリック位置を取得してメニューを表示するイベント。pointはGSize(x,y)で返される。 GEvent.addListener(map, "singlerightclick", function(point) { var rmenux = point.x; var rmenuy = point.y; //MapPX.width、MapPX.heightの後の74・86はメニュー全体の横幅・縦幅。 if(rmenux > (MapPX.width - 74)) { rmenux = MapPX.width - 74; } if(rmenuy > (MapPX.height - 86)) { rmenuy = MapPX.height - 86; } var rmenu_pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(rmenux, rmenuy)); rmenu_pos.apply(rmenu); rmenu.style.visibility = "visible"; }); //地図上を左クリックしたらメニューが消える。 GEvent.addListener(map, "click", function() { if (rmenu.style.visibility == "visible"){ rmenu.style.visibility = "hidden"; } });
あと上記のコードのようにズームレベルをいじる場合、
function onload(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
これだと機能しないので、mapをグローバルレベルで宣言。
var map;
function onload(){
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
いつも通りdocument.createElement("div")でdivエレメントを作成して、map.getContainer().appendChild(〜);でmap内に返している。そろそろ自作でコントロールを作成したいが、何分javascriptを始めて2ヶ月もたっていないので・・・。
ところで昨日の夜はひたすらseesaa全体が落ちてしまっていた。
アフィリエイト全開のニュース系ブログ（別名コピペブログ）とかが多すぎるんでわ？
追加：Google Maps APIの右クリックメニューその２
GoogleMapsで経度と緯度を調べるツールを自作しようと思ったので地図の中心に十字マークを設定するコードを追加してみた。
こちらは待機中の画像。
アクティブ中の画像