GoogleMapsで経度と緯度を調べるツールを自作しようと思ったので地図の中心に十字マークを設定するコードを追加してみた。

マーカーを貼って地図が移動するたびに、clearoverlayとaddoverlay処理を繰り返すのはなんとなくスマートじゃないような気がするので、縦長と細長の空divエレメントを作って、GControlPositionで位置を設定するようにした。処理の流れをまとめると

1. 十字架のスタイルを設定。
2. 横線と縦線の空divを作成。(backgroundColorで塗りつぶしのブロック要素）
3. 地図の中心位置とdiv要素のオフセット位置を計算。
4. GControlPositionで位置を指定。
5. 4で作成した変数.apply(DOMエレメント);map.getContainer().appendChild(DOMエレメント);

ちなみに正しいjavascript用語を使っているかは不明です。

//cross_px：十字の横幅・縦幅（ピクセル）
//cross_td：十字の太さ（ピクセル）
//cross_cr：十字の色（スタイルシートと同様の書式）
var cross_px = 60;
var cross_td = 2;
var cross_cr = "red";

//十字の縦線のエレメントを設定    
var cross_h_emt =  document.createElement("div");
//IE用にfontSizeを最小値
cross_h_emt.style.fontSize = "1px";
cross_h_emt.style.margin = "0px";
cross_h_emt.style.padding = "0px";
cross_h_emt.style.width = cross_px + "px";
cross_h_emt.style.height = cross_td + "px";
cross_h_emt.style.backgroundColor = cross_cr;

//十字の横線のエレメントを設定
var cross_v_emt =  document.createElement("div");
cross_v_emt.style.margin = "0px";
cross_v_emt.style.padding = "0px";
cross_v_emt.style.width = cross_td+"px";
cross_v_emt.style.height = cross_px + "px";
cross_v_emt.style.backgroundColor = cross_cr;

//十字（縦・横線）の位置を計算
var MapPX = map.getSize();
var mycenterHX = MapPX.width  / 2 - cross_px / 2;
var mycenterHY = MapPX.height / 2 - cross_td / 2;
var mycenterVX = MapPX.width  / 2 - cross_td / 2;
var mycenterVY = MapPX.height / 2 - cross_px / 2;

var mycenter_H = new GSize(mycenterHX,mycenterHY);
var myposH = new GControlPosition(G_ANCHOR_TOP_LEFT, mycenter_H);
myposH.apply(cross_h_emt);
map.getContainer().appendChild(cross_h_emt); 

var mycenter_V = new GSize(mycenterVX,mycenterVY);
var myposV = new GControlPosition(G_ANCHOR_TOP_LEFT, mycenter_V);
myposV.apply(cross_v_emt); 
map.getContainer().appendChild(cross_v_emt);

極めて単純なスクリプト・・・。これをmap = Gmap2();の後に貼り付けてください。

コードの説明をすると（要らないかな？？）、
var cross_px = 60;
var cross_td = 2;
var cross_cr = "red";
上から順に、十字架の大きさ（横幅・縦幅共通）・十字架の太さ・十字架の色。