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

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

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を基準として配置場所を計算しています。

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

コメント

  1. Masashi Arizono より:

    動かないクロスマーカー。
    このテクニックはとても凄いと思います。
    私の求めるものとピタリ合致しています。
    このテクニックは再利用させていただいてもよろしいでしょうか?

    • hirolin より:

      どうぞ、お使いください。
      他のコントロールの配置状況によっては簡単にはいかないかも知れませんが、配置の基準位置さえしっかりできれば、問題ないかと…

      • Masashi Arizono より:

        hirolinさん、こんにちは。
        快諾感謝です。
        いえいえ、元の造りが秀逸なので、何の苦労もなく、実現できました。(ほぼまんま?(笑))
        googlemapは、まだあまり詳しくないのですが、実現する感性が素晴らしいです。こんなアプローチがあったなんて。。

        以下、作成途上の、とあるサービスの一部で、実現してみたurlです。
        http://phoenix-d.jp/am/a87ff679a2f3e71d9181a67b7542122c/hmv
        静的マップベースの位置登録補助に動的マップを利用しようとして、そこにクロスバーを表示してみました。
        ほんとに途上なので、突っ込みご容赦(笑)

        • hirolin より:

          こんにちは!
          urlを拝見すると、4分割しているラインがそうなのかな?
          無事に移植できたようで、なによりです。

          • Masashi Arizono より:

            こんばんは。
            そうです、そうです。
            おっと、長さをいじっていましたね。

            メルカトルなので、中心位置、というよりは、
            中心位置と同じ緯度線、経度線としての表示の
            ほうが、地図内の周囲を見比べる、よい目安と
            なるので、長くしています。

            全く動かないから、凛としたその佇まいとしても
            結構気に入っています。(おかげさまで。。。)

            (航空機がお好きなんですね。ちょっと親近感。。)

          • hirolin より:

            こんにちは~!
            なるほど、緯度経度線としての利用なのですね~
            応用範囲が広がるって、うれしいですね~!

            航空機、好きです… でも、このブログのアイコンにもあるように、鉄道も好きです…

            Masashi Arizonoさんも、お仲間ですか~? こりゃ、うれしいですね!

タイトルとURLをコピーしました