センターマーカーの表示

概要

マップ中央に＋などの印を常に表示させる Tips です。

説明

Google Maps API では移動を終了した際に、指定した関数を呼び出すことができます。
その関数で、センターマーカーの位置を画面中央にし直すことで、常に画面中央にセンターマーカーを表示することができます。

対応ブラウザ／ツール

ブラウザ

動作するブラウザは下記の通りです。

IE Firefox Netscape Opera Safari
○ ○ ○ ○ ○

ツール等

このスクリプトがそのまま使えるツールは下記の通りです。

GME
○

サンプル

Google Maps API の APIキー取得時のソース※に 当Tips を搭載したものです。

※ UTF-8のメタタグなど一部編集を加えています。

サンプル
tips_gmap_centermarker.html
 HTML

ソースと解説

ソース

//センターマーカーの定義
var center_marker_icon = new GIcon();
center_marker_icon.image = "./image/centermarker.png"; //マーカーのファイル名
center_marker_icon.shadow = "./image/centermarker_shadow.png"; //影のファイル名（省略可）
center_marker_icon.iconSize = new GSize( 23 , 23 ); //マーカーのサイズ（幅,高さ）
center_marker_icon.shadowSize = new GSize( 29 , 29 ); //影のサイズ（幅,高さ）（省略可）
center_marker_icon.iconAnchor = new GPoint( 11 , 11 ); //中央の位置（X,Y）

//センターマーカーの表示
var center_marker = new GMarker( map.getCenterLatLng() , center_marker_icon );
map.addOverlay( center_marker );

//移動終了後のイベントを追加
GEvent.addListener( map , "moveend" , function(){
map.removeOverlay( center_marker );
center_marker = new GMarker( map.getCenterLatLng() , center_marker_icon );
map.addOverlay( center_marker );
} );

map は、GMap を定義する var map = new GMap( … の変数名を入れてください。 初期値のままの場合は、変更する必要はありません。

ファイル名（./image/centermarker.png等）やマーカーサイズ等は各環境によって異なります。

Google Maps Editor の場合は map を gme_map に書き換えてください。

解説

center_marker をセンターマーカー用変数として確保し、移動終了時に一度それを削除、新たに描き直します。移動する毎にこれを繰り返します。

備考

Google Maps API のイベント move で常に画面中央にする方法もありますが、この方法はプログラム的に負荷が高くなります。処理能力の低いパソコンでは、ドラッグ＆ドロップが動かしづらくなるため、お勧めしません。

応用

KsGMap では、ドラッグ中のみマーカーではない普通の画像を、マップのあるdivタグの上に重ねる方法で、常に表示するようにしています。
この方法は、KsGMapコアに依存しているので、ここでは紹介しませんが、興味のある方はソースを解析してみて下さい。