徒然245+

あれこれ戯れ言を…

*

Google Maps の中心に動かないマーカーを表示する

   

[`evernote` not found]
LINEで送る

このブログでも地図を表示していますが、特定のポイントを指定する方法が意外と難しい。

googlemapで、特定のポイントをクリックすると、そこの緯度経度が表示されるのだが…

微調整が難しい。

ならば!

作ってみました、微妙に調整して座標を取得できるマップです。

そこで苦労したのが、センターマーカー

そう、真ん中でクロスしている赤いラインです。

検索して見つけた方法は、赤いクロスの画像を用意しておいて、そいつを真ん中に表示させるという方法。

マップの作成の際に、


var crosshairShape = { coords:[0,0,0,0], type:'rect' };
var marker = new google.maps.Marker(
	{
		map: 	map,
		icon:	'image/cross.png',
		shape:	crosshairShape
	}
);
marker.bindTo('position', map, 'center');

というコードを追加することで可能とわかった…
icon:で指示しているが、クロスの画像ファイルである。

ところが!

この方法だと、ちょいと動きが変…
地図をドラッグさせると、一瞬クロスマーカーが動いてしまうのだ。
こりゃ~やりずらい!

というわけで、動かないマーカーを表示させるべく、試行錯誤…
ようやく完成したのがGoogleMaps中心座標取得である。

メインとなる部分は、

	/**************************************************************************/
	function CrossControl( controlDiv, map )
	/*
	* センターマーカーオブジェクト
	***************************************************************************/
	{

		var mapDiv = map.getDiv();

		// 縦のライン
		var controlCrossV = document.createElement('DIV');
		controlCrossV.style.position = 'absolute'
		controlCrossV.style.borderStyle = 'none none none solid';
		controlCrossV.style.borderWidth = '1px';
		controlCrossV.style.borderColor = 'red';
		controlCrossV.style.height = crossSize + 'px';
		controlCrossV.style.marginTop   = (( mapDiv.offsetHeight - crossSize + 1) / 2) + 'px';
		controlDiv.appendChild( controlCrossV );

		// 横のライン
		var controlCrossH = document.createElement('DIV');
		controlCrossH.style.position = 'absolute'
		controlCrossH.style.borderStyle = 'solid none none none';
		controlCrossH.style.borderWidth = '1px';
		controlCrossH.style.borderColor = 'red';
		controlCrossH.style.width = crossSize + 'px';
		controlCrossH.style.marginTop =  mapDiv.offsetHeight / 2 + 'px';
		controlCrossH.style.marginLeft = (( crossSize - 1 ) / -2) + 'px';
		controlDiv.appendChild( controlCrossH );
	}

	/**************************************************************************/
	function createCenterMaker()
	/*
	* センターマーカー作成
	***************************************************************************/
	{
		var CrossControlDiv = document.createElement('DIV');
		var crossControl = new CrossControl( CrossControlDiv, map );

		CrossControlDiv.index = 1;
		map.controls[google.maps.ControlPosition.TOP].push( CrossControlDiv );
	}

こんな感じ…

コントロールとして、クロスするラインのオブジェクトを作成し、貼り付けるだけである。
これで、グリグリやってもクロスマーカーは動かない。

コントロールは、既存のコントロールとの兼ね合いで配置される場所が変わるので、今回はなにもコントロールが配置されていない、TOPを基準として配置場所を計算しています。

特定のポイントも探しやすくなりました。

 -