//==================================================
// Google Map Base
//==================================================
/*
	HTML内に下記のコードを記入すると自動的にMapを表示し、各機能が追加される

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=***API-KEY***" 
	type="text/javascript" charset="UTF-8"></script>
	<script src="gmap.js" type="text/javascript" charset="UTF-8"></script>
	<div id="map"></div>
	<input type="text" name="gmapq" id="gmapq" />
	<input type="button" value="検索" id="gmaps" />

*/


// 初期設定（表示位置、ズームレベル）
var lat = 35.658587;
var lng = 139.745425;
var zLevel = 16;

// Mapサイズ
var mapH = 400;
var mapW = 550;

// 初期化
var map;
var mapPoint;
var maker;
var geocoder;

window.onload = function(){
	// MAP css 設定
	var element = document.getElementById("map");
	element.style.height = mapH + 'px';
	element.style.width = mapW + 'px';
	// ジオコーダーフォーム設定
	var element = document.getElementById("gmapq");
	element.setAttribute("onKeyPress", "enterCancel(event||window.event)");
	var element = document.getElementById("gmaps");
	element.setAttribute("onClick", "onGMapMoveAddress(document.getElementById('gmapq').value)");
	// GMap設定
	if(GBrowserIsCompatible()){ 
		// map表示
		map = new GMap2(document.getElementById("map"));
		// 中心地点設定
		if(document.getElementById('lat').value){ lat = document.getElementById('lat').value; }
		if(document.getElementById('lng').value){ lng = document.getElementById('lng').value; }
		mapPoint = new GLatLng(lat,lng);
		// 中心地点表示
		map.setCenter(mapPoint,zLevel);
		// コントローラー表示（サイズと方向）
		map.addControl(new GLargeMapControl());
		// スケールコントロール表示（Km/マイル）
		map.addControl(new GScaleControl());
		// コントローラー表示（地図と衛生写真の切り替え）
		map.addControl(new GMapTypeControl());
		//地図ボタン追加
		map.addMapType(G_PHYSICAL_MAP);			//地形
	//	map.addMapType(G_MOON_VISIBLE_MAP);		//月面写真
	//	map.addMapType(G_MOON_ELEVATION_MAP);	//月面標高
	//	map.addMapType(G_MARS_VISIBLE_MAP);		//火星写真
	//	map.addMapType(G_MARS_ELEVATION_MAP);	//火星標高
	//	map.addMapType(G_MARS_INFRARED_MAP);	//火星赤外線
	//	map.addMapType(G_SKY_VISIBLE_MAP);		//夜空
	//	map.addMapType(G_SATELLITE_3D_MAP);		//Google Earth
		// オーバービューマップコントロール（右下の小地図）
		map.addControl(new GOverviewMapControl(new GSize(100,100)));
		// なめらかズーム
		map.enableContinuousZoom();
		// ダブルクリックズーム
		map.enableDoubleClickZoom();
		// ジオコーディング設定
		geocoder = new GClientGeocoder();
		// 地図クリック時
		GEvent.addListener(map, 'click', onGMapClick);
		GEvent.addListener(map, 'click', onGMapMoveCenter);
		// 地図ズーム変更時
		GEvent.addListener(map, "zoomend", onGMapZoomEnd);
		// 地図ドラッグ終了時
		GEvent.addListener(map, 'moveend', onGMapSetForm);
	}else{
		alert('お使いのブラウザでは地図機能はご利用になれません。');
	}
};

// 地図クリック時
function onGMapClick(overlay, point) {
	// 全マーカー削除
	onGMapDeleteMakerAll();
	// ズームレベル取得
	zLevel = map.getBoundsZoomLevel(map.getBounds());
	// マーカーを生成（draggable属性付き）
	onGMapSetMaker(point,zLevel,1);
	// フォームに位置情報をセット
	onGMapSetForm(point,zLevel);
	// ２点間の距離算出
	var point1 = new GLatLng(35.658587,139.745425);
	lat = point.lat();
	lng = point.lng();
	var point2 = new GLatLng(lat,lng);
	var meter = Math.floor(point2.distanceFrom(point1));
	var kmeter = meter/1000;
	var mile = meter/1600;
}

// 地図ズーム変更時
function onGMapZoomEnd(overlay, point) {
	// 全マーカー削除
	onGMapDeleteMakerAll();
	// ズームレベル取得
	zLevel = map.getBoundsZoomLevel(map.getBounds());
	// マーカーを生成（draggable属性付き）
	onGMapSetMaker(point,zLevel,1);
	// フォームに位置情報をセット
	onGMapSetForm(point,zLevel);
}

// フォームに位置情報をセット
function onGMapSetForm(mapPoint,zLevel){
	// 指定が無い場合
	if(!mapPoint){ mapPoint = map.getCenter(); }
	if(!zLevel){ zLevel = map.getBoundsZoomLevel(map.getBounds()); }
	// lat,lng設定
	lat = mapPoint.lat();
	lng = mapPoint.lng();
	// フォームに入力
	document.getElementById('lat').value = lat;
	document.getElementById('lng').value = lng;
	document.getElementById('zl').value = zLevel;
}

// 指定地点が中心になるように移動
function onGMapMovePointCenter(mapPoint,zLevel){
	lat = mapPoint.lat();
	lng = mapPoint.lng();
//	map.setCenter(new GLatLng(lat,lng), zLevel);
	map.panTo(new GLatLng(lat,lng));
}
function onGMapMoveCenter(overlay, point){
	map.panTo(point);
}


// マーカーを生成
function onGMapSetMaker(mapPoint,zLevel,draggable,icon,center){
	// 指定が無い場合
	if(!mapPoint){ mapPoint = map.getCenter(); }
	if(!zLevel){ zLevel = map.getBoundsZoomLevel(map.getBounds()); }
	// draggable指定あり
	if(draggable){
		// icon指定あり
		if(icon){
			marker = new GMarker(mapPoint,{ draggable:true,icon:icon });
		}
		// icon指定なし
		else{
			marker = new GMarker(mapPoint,{ draggable:true });
		}
	}
	// draggable指定なし
	else{
		// icon指定あり
		if(icon){
			marker = new GMarker(mapPoint,{ draggable:false,icon:icon });
		}
		// icon指定なし
		else{
			marker = new GMarker(mapPoint,{ draggable:false });
		}
	}
	// マーカーがドラッグされた際の処理を設定
	GEvent.addListener(marker, "dragend", function(){
		// 移動しても良い様に再設定
		mapPoint = marker.getPoint();
		zLevel = map.getBoundsZoomLevel(map.getBounds());
		// マーカーをセンターに移動
	//	onGMapMovePointCenter(mapPoint,zLevel);
		// マーカーの位置をフォームに表示
		onGMapSetForm(mapPoint,zLevel);
	});
	// マーカーがクリックされた際の処理を設定
	GEvent.addListener(marker, "click", function(){
		 var html = 'あいうえお';
		 marker.openInfoWindowHtml(html);
	});
	// マーカー生成
	map.addOverlay(marker);
	// 中心に移動
	if(center){ onGMapMovePointCenter(mapPoint,zLevel); }
}

// 全てのマーカーを削除
function onGMapDeleteMakerAll(){
	map.clearOverlays();
}


// ジオコーディング（住所から緯度と経度を取得）
function onGMapMoveAddress(address){
	geocoder.getLatLng(address, onGMapShowMap);
}
function onGMapShowMap(mapPoint){
	if (mapPoint){
		// 指定地点が中心になるように移動
		onGMapMovePointCenter(mapPoint,zLevel);
		// マーカーを生成（draggable属性付き）
		onGMapSetMaker(mapPoint,zLevel,1);
		// フォームに位置情報をセット 
		onGMapSetForm(mapPoint,zLevel);
	}else{
		alert("ご入力の内容では緯度経度に変換できません");
	}
}

// ジオコーディング利用の際、テキストエリアでリターンキーを押した際の処理
// ページが移動せずに、ジオコーディングが実行される様にしている
function enterCancel(evt){
	var q = document.getElementById("gmapq").value;
	if(evt.keyCode == 13){
		if (evt.preventDefault) {
			evt.preventDefault();
		} else {
			evt.returnValue = false;
		}
		if(q){
			onGMapMoveAddress(q);
		}
	}
}