Google　Mapをぐるぐる回すサンプルを作ってみました

HTML5 Google Map CSS3


　CSS3のtranceformを利用してJSとCSSのみでGoogle　Mapをぐるぐる回すサンプルを作ってみました。PCでは、Firefox 3.1以上、Safari 3.1以上、Google chromeで動作します。

　また、HTML5のgeoloiocationに対応していてiPhone3GSでアクセスすると公式のGoogleMapsアプリと同じように方位にあわせて地図が回転する、はずです。実機持ってないのでテストできてませんが。

地図の回転の仕組み

　
　地図の回転そのものは単純で、geolocationのheadingプロパティおよび矢印の回転を検出してjavascriptでプロパティを設定しているだけです。
　地図のドラッグは本来ならば回転した分だけ斜めになるところを、単純な回転座標系の座標変換をGoogle　mapのmoveイベントで行って普通にマウスの移動に追随するようにしています。
　

maprotater.prototype.dragMap=function(){


	var center=this.map_obj.getCenter();
        //緯度経度を移動ベクトルとして検出
	var vec_x=center.lat-this.lat;
	var vec_y=center.lng-this.lng;
	var rad=this.degree/360*Math.PI*2;
	var sin=Math.sin(rad);
	var cos=Math.cos(rad);
        //移動ベクトルを回転の逆向きに座標変換
	var trance_x=vec_x*cos+sin*vec_y;
	var trance_y=-1*vec_x*sin+cos*vec_y;
	//実際の位置を算出
        var lat=this.lat+trance_x;
	var lng=this.lng+trance_y;
        this.setCenter(lat,lng);
	this.lat=lat;
	this.lng=lng;
	
};

　また地図が枠の中に納まっているように見せるために、地図の外側にもう一つ、地図より小さな枠となるdivボックスを設定し、overflowをhiddenに設定してあまりの部分を隠しています。
　
　HTML部分

  <div id="outer" >
	    	<div id="map_canvas" style="position:relative;width:370px;height:370px;top:-85px;left:-35px;"></div>
	 	</div>
</div>


CSS

    #outer{
    	width: 300px;
    	height:200px;
    	overflow:hidden;
    	position:relative;
    	left:0px;
    	top:0px;
    	float:left
    }

　下の図は45度回転した場合で、水色が地図、緑が枠の部分です。
　これを見ると解ると思いますが、地図のサイズは対角線が枠の部分の幅と高さどちらともよりも大きくなるようにしておき、positionプロパティで縦横ともに枠に対して中心が重なるように持ってきています。こうすることで、地図が回転しても枠の中だけが見えます。


矢印の回転の仕組み

　
　矢印アイコンに枠を設定し、その枠に対するマウスの位置からMath.atan2で角度を逆算して回転を同期しています。
　ただし、CSS3のtranceformにおいて角度は時計回りなのに対し、Math.atan2は逆向きなので注意が必要です　

　JavaScript

	//jQueryを使う場合
	$("#rotetar_frame").mousemove(function(e){
	        //マウスの位置を枠の中心を基準にしたx,y座標系に変換
		
     		var x =(e.pageX - $('#rotetar_frame').position().left)- $('#rotetar_frame').outerWidth()/2;
     		var y = $('#rotetar_frame').outerHeight()/2-(e.pageY - $('#rotetar_frame').position().top);
	        
		//時計回りの度数を算出。Math.atan2だけはyが最初
		var deg=-1*360*Math.atan2(y,x)/(Math.PI*2);
		var deg_text="rotate("+deg+"deg)";//プロパティを作成
		var style={};
		style["-moz-transform"]=style["-webkit-transform"]=deg_text;
		$("#rotetar_frame > .rotetar_inner").css(style);
		rotater.rotate(deg);//地図の回転処理の部分
	});
HTML

>|html|
  <div id="outer" >
	    	<div id="map_canvas" style="position:relative;width:370px;height:370px;top:-85px;left:-35px;"></div>
	 	</div>
</div>

TODO

　現在はまだ地図のコントロール部分が見えるようになっていないので、そこを解消できたらライラブラリとして公開したいと思います。