$(function(){
	mapInit();
	var position = $("#mapCanvas").offset().top-20;
	$(".placeNameBoxWrap").click(function () {
        $('html,body').animate({ scrollTop : position }, 'fast');
        mapClick($(this).prop("rel"));
        return false;
    });
    /*$(".placeNameBoxWrap").mouseover(function () {
    	mapClick($(this).prop("rel"));
    	return false;
    });*/
	$("#locationBtn").click(function () {
		var selectLocation = $('[name=locationSelector]').val();
		window.location.href = selectLocation;
		location.reload();
	});
});

//地図の基本設定
var myOptions;
var styledMapOptions;
var map;
var markers;
function mapInit() {

	if("#hachiojiten" == location.hash) {
		hachiojiten();
	}else if("#takao" == location.hash) {
		takao();
	}else if("#tachikawa" == location.hash) {
		tachikawa();
	}else if("#yaho" == location.hash) {
		yaho();
	}else if("#sagamihara" == location.hash) {
		sagamihara();
	}else if("#akishima" == location.hash) {
		akishima();
	}else if("#hachiojiteninter" == location.hash) {
		hachiojiteninter();
	}else if("#fuchu" == location.hash) {
		fuchu();
	}else if("#kokubunji" == location.hash) {
		kokubunji();
	}else if("#machida" == location.hash) {
		machida();
	}else{
		hachiojiten();
	}
	//地図のスタイルを設定
	var styleOptions = [
			  {
			    "stylers": [
			      { "gamma": 2.01 },
			      { "hue": "#ff0033" },
			      { "visibility": "simplified" },
			      { "lightness": -5 },
			      { "saturation": -5 }
			    ]
			  }
			];

	var mapType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
	map.mapTypes.set('okusama', mapType);
	map.setMapTypeId('okusama');
	var countNum = 0;
	for (var i = 0; i < markers.length; i++) {
		countNum++;
		icon = new google.maps.MarkerImage(
	    	'/sagamihara/images/mapIconBL_'+ countNum +'.png',
		    new google.maps.Size(25,37),
		    new google.maps.Point(0,0)
		 );
		var content = markers[i][0];
		var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
		createMarker(latlng,content,map,icon,i);
	}
}

//八王子 駅
function hachiojiten() {
	$(".locationSelector").val("#hachiojiten");
	$('.hachiojiten').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.6556165,139.3387998),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '八王子 駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">八王子横山町郵便局</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6598172, 139.3354861],
					['<h1 class="firstHeading">西放射線中町公園</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6589703, 139.3353591],
					['<h1 class="firstHeading">ファミリーマート 八王子ユーロード店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6581110, 139.3366692]
				];
}
//高尾駅
function takao() {
	$(".locationSelector").val("#takao");
	$('.takao').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.6422556,139.2816855),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '高尾駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">ファミリーマート 秀栄高尾駅北口店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6427300, 139.2813900],
					['<h1 class="firstHeading">モスバーガー 高尾南口店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6414500, 139.2836600]
				];
}
//立川駅
function tachikawa() {
	$(".locationSelector").val("#tachikawa");
	$('.tachikawa').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.6979534,139.4127066),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '立川駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">ファミリーマート 立川北口店</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/tachikawa1.jpg" width="250" height="180" />', 
					35.6984900, 139.4170200],
					['<h1 class="firstHeading">立川郵便局前</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/tachikawa2.jpg" width="250" height="180" />', 
					35.6985800, 139.4154438],
					['<h1 class="firstHeading">ローソン 立川ウインズ通店</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/tachikawa4.jpg" width="250" height="180" />', 
					35.6973600, 139.4156400],
					['<h1 class="firstHeading">錦町食堂前</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6965485, 139.4164542],
					['<h1 class="firstHeading">ファミリーマート 立川錦町店</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/tachikawa6.jpg" width="250" height="180" />', 
					35.6966200, 139.4171700]
				];
}
//谷保駅
function yaho() {
	$(".locationSelector").val("#yaho");
	$('.yaho').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 18,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.6814519,139.4464794),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '谷保駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">谷保駅 北口ロータリー</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6815890, 139.4468740]
				];
}
//JR相模原駅
function sagamihara() {
	$(".locationSelector").val("#sagamihara");
	$('.sagamihara').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 16,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.5793840,139.3693282),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: 'JR相模原駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">ローソン さがみ夢大通り店</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/sagamihara1.jpg" width="250" height="180" />', 
					35.5786700, 139.3692330],
					['<h1 class="firstHeading">串カツ田中 相模原店</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/sagamihara5.jpg" width="250" height="180" />', 
					35.5796070, 139.3704742],
					['<h1 class="firstHeading">ホテルウォーターゲート相模原</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/sagamihara3.jpg" width="250" height="180" />', 
					35.5782410, 139.3706210],
					['<h1 class="firstHeading">相模原プラザ</h1>'+
					'<div class="imageBox"><img src="https://www.okusama-angel.net/sagamihara/images/meetingplace/sagamihara4.jpg" width="250" height="180" />', 
					35.5797510, 139.3706715]
				];
}
//昭島駅
function akishima() {
	$(".locationSelector").val("#akishima");
	$('.akishima').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.7135017,139.3608896),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '昭島駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">昭島駅</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.7135017, 139.3608896]
				];
}
//八王子インター 付近
function hachiojiteninter() {
	$(".locationSelector").val("#hachiojiteninter");
	$('.hachiojiteninter').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.6582300,139.3392200),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '八王子インター 付近待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">西武信用金庫 八王子支店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6599080, 139.3330936],
					['<h1 class="firstHeading">ローソン 八王子東町店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6584053, 139.3392329]
				];
}
//府中駅
function fuchu() {
	$(".locationSelector").val("#fuchu");
	$('.fuchu').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.6724500,139.4801790),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '府中駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">府中駅</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6724500, 139.4801790]
				];
}
//国分寺駅
function kokubunji() {
	$(".locationSelector").val("#kokubunji");
	$('.kokubunji').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 15,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.7003314,139.4800663),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '国分寺駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">ファミリーマート 国分寺南町三丁目店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6987450, 139.4797460],
					['<h1 class="firstHeading">みずほ銀行 国分寺支店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.6993800, 139.4808430],
					['<h1 class="firstHeading">不二家 国分寺店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.7010770, 139.4799920],
					['<h1 class="firstHeading">セブン-イレブン 国分寺本町2丁目店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.7019730, 139.4816760]
				];
}
//町田駅
function machida() {
	$(".locationSelector").val("#machida");
	$('.machida').css('display','block');
	//地図の中心点と拡大率を設定
	myOptions = {
		zoom: 18,
		disableDefaultUI: true,
		/*streetViewControl: false,*/
		center: new google.maps.LatLng(35.5419950,139.4454127),
		mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
	styledMapOptions = { name: '町田駅待ち合わせ場所' }
	//アイコンの場所の名前と緯度経度を追加
	markers = [
					['<h1 class="firstHeading">ローソン 町田中央南口店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.5416168, 139.4457306],
					['<h1 class="firstHeading">デニーズ 町田南口店</h1>'+
					'<div class="imageBox"><!--img src="http://www.angelline.net/images/ajobBnr.gif" /-->', 
					35.5418845, 139.4448945]
				];
}


//アイコンの設定
var currentInfoWindow = null;
var gmarkers = [];
function createMarker(latlng,content,map,icon,i){
	var iwopts = {maxWidth: 250,};
	var infoWindow = new google.maps.InfoWindow(iwopts);
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: icon,
		animation: google.maps.Animation.DROP
	});
	google.maps.event.addListener(marker, 'click', function() {
		if (currentInfoWindow) {
			currentInfoWindow.close();
		}
		/*infoWindow.close();*/
		infoWindow.setContent(content);
		infoWindow.open(map,marker);
		currentInfoWindow = infoWindow;
	});
	i++; 
	gmarkers[i] = marker;
}

//アイコンとテキストリンクのクリックイベント
function mapClick(i) {
	google.maps.event.trigger(gmarkers[i], "click");
	map.setCenter(gmarkers[i].getPosition());
}