地図の中央に常に十字マークを表示する - Google Maps API v3

元ネタはここ↓
4-2：地図の中心に常に『十字マーク』を表示する - Google Maps 活用講座
でもここはversion 2なので、version 3向けに改造する必要がある。

と言ってもそう難しいものではなく、地図が移動したら十字マークを描画すると読み替えれば簡単です。
4-2：地図の中心に常に『十字マーク』を表示する - Google Maps 活用講座

こう書いてあるとおり、画像をマーカーに使って、移動するたびにその画像を地図中央に移動させている。
ただversion 3だとmapイベントにmoveがない。

Google Maps API version 3 リファレンス (Google Maps API Version3 日本語ドキュメント(非公式))
リファレンスを確認すると、dragがそれのようだ。

画像はそのままパクらせて頂きました。
まずはマーカーに使う画像の情報を定義します。

var image = new google.maps.MarkerImage(
'images/center.gif'
, new google.maps.Size(39, 39)
, new google.maps.Point(0,0)
, new google.maps.Point(19,19)
);

細かなプロパティはリファレンスを参照していただくとして、簡単に説明。
まずはURLを指定。相対で大丈夫らしい。
続くsizeはその画像のサイズ。
次はその画像の表示開始座標であるorigin。version 3では大きなサイズの画像も使用できるようになっている。なので、複数のアイコンをつなげた大きな画像を用意して、その画像のどこから開始するのかを記載する。これと上の画像サイズの指定で見せたい箇所を指定することができる。
anchorが判りにくくて困った。
表示する際に開始地点（指定された緯度経度）をどこにするか、ということだと解釈した。

デフォルトでは、アンカーはイメージの下辺 - 中央(幅 / 2, 高さ の座標値)。つまりマーカーは指定された LatLng の位置に配置されたときは、アンカーの定義されたピクセル値は指定されたLatLngの位置です。
Google Maps API version 3 リファレンス (Google Maps API Version3 日本語ドキュメント(非公式))

デフォルトのマーカーは画像の下辺の中央がその地点であることを考えると、そうなのかな？って。
なので、画像の中央をその地点にしたいのであれば、XもYもサイズの半分を指定すればいいということだと思ったけど（伝わる？）。

これでプロパティの設定が完了。
次にマーカー…というか、画像マーカーを設定する。

var centerIcon = new google.maps.Marker({
icon: image
});

とりあえずfunctionの外側に書いた。

でもってonload=""で読み込んでる初期化関数で、地図上にマークしてやる。

centerIcon.setMap(map);
centerIcon.setPosition(myLatLng);

setMap()とsetPosistion()はnewの中でやってもいいかな？

var centerIcon = new google.maps.Marker({
icon: image
, map: map
, position: myLatLng;
});

これでとりあえず中央に表示されるようになる。
まだイベントを追加してないので、最初に設定した場所から移動してくれない。


dragイベントを追加してやる。

google.maps.event.addListener(map, 'drag', function() {
drawMarker(map.getCenter());
});

ちなみにイベント処理後にも同じようにdrawMarker()を追加しないと、ドラッグが発生するまでマーカーを表示してくれない。

で、drawMarker()はこれだけ。

function drawMarker(centerLocation){
centerIcon.setPosition(centerLocation);
}

地図の中央を引数にして、その場所に移動させてやる。



…がしかし！

なんだろう、この重さは。


ドラッグしても一瞬、地図についていっちゃうのね。
メモリがグルグルしてるので、恐らく処理的に思いのかもしれない。
ソースを最適化してやる必要があるのかな？
JavaScriptはよー判らん。