//<![CDATA[
//最大表示件数
var max_num = 100;
//配列
var listeners = new Array(); 
//配列(マーカーを保持)
var marker_arr=[];
//配列（教室のデータ）
var clinic_datas=[];

//配列(メインのhtmlを生成)
var htmls = [];
//サイドバー等で使用する添え字
var j = 0;

//ここで使用するdiv idを設定する (group_map　がhtml上のdiv idに対応)
var map = new GMap2(document.getElementById("group_map"));
    map.addControl(new GLargeMapControl());
	map.setCenter(new GLatLng(35.681391, 139.766103), 5); // 地図中心
	// map.setCenter(new GLatLng(0,0),0);
//クラスタリングの設定	
var clusterer = new Clusterer( map );
clusterer.SetMaxVisibleMarkers(20);
clusterer.SetMinMarkersPerCluster(3);
clusterer.SetMaxLinesPerInfoBox(11);

var clu_icon = new GIcon();
clu_icon.image = "https://yoga.kuchihiro.com/image/maps/blue_big.png";
clu_icon.smallImage = "https://yoga.kuchihiro.com/image/maps/blue_small.gif";
clu_icon.iconSize = new GSize(23, 44);
clu_icon.iconAnchor = new GPoint(12, 44);
clu_icon.infoWindowAnchor = new GPoint(12, 22);
clusterer.SetIcon(clu_icon);
plot_marker(map);

// 地図上にマーカーを表示する関数 (引数mapは省略可)
function plot_marker(map){

	var bounds = new GLatLngBounds();

    url="https://yoga.kuchihiro.com/map_lib/gmap_ajax.php?group_id=109";
	
　　// XMLHttpRequestオブジェクトを生成
　　var request = GXmlHttp.create();
　　// GETメソッドでurlを非同期(true)に開く
　　request.open("GET",url,true);
　　// コールバック関数（ajax.phpから返される）
　　request.onreadystatechange = function() {
　　if (request.readyState == 4) {
　　　　var res = request.responseXML;
　　　　// XMLのmarkerタグ要素の配列markersを作る
　　　　var markers = res.documentElement.getElementsByTagName("marker");
		var result_num = res.documentElement.getElementsByTagName("result")[0].getAttribute("num");
		// 通常のアイコン
		var n_icon = new GIcon();
		n_icon.image = "https://yoga.kuchihiro.com/image/maps/blue2.png";
		n_icon.iconSize = new GSize(16, 31);
		n_icon.iconAnchor = new GPoint(8, 30);
		n_icon.infoWindowAnchor = new GPoint(8, 14);
		
		for (var i = 0; i < markers.length; i++) {
		　　　　　var lon = parseFloat(markers[i].getAttribute("longitude"));
　　　　　　　　 var lat = parseFloat(markers[i].getAttribute("latitude"));
				 var clinic_array=Object();
				 clinic_array["clinic_name"]=markers[i].getAttribute("clinic_name");
				 clinic_array["address"]=markers[i].getAttribute("address");
				 clinic_array["detail_url"]=markers[i].getAttribute("detail_url");
				 clinic_array["clinic_url"]=markers[i].getAttribute("clinic_url");
				 clinic_array["c_link"]=markers[i].getAttribute("c_link");
				 clinic_array["city_id"]=markers[i].getAttribute("city_id");
				 clinic_array["pref_id"]=markers[i].getAttribute("pref_id");
				 clinic_array["page_id"]=markers[i].getAttribute("page_id");
				 clinic_array["branch_name"]=markers[i].getAttribute("branch_name");
				 var point = new GLatLng(lat,lon);
				 var marker = createMarker(point,clinic_array,n_icon);
				 var class_title='<a href="detail/clinic_'+clinic_array["page_id"]+'.html">'+clinic_array["branch_name"]+'</a>';
				 var class_subtitle='<a href="javascript:getDetail('+i+')">拡大図</a>｜<a href="'+clinic_array["clinic_url"]+'" target="_blank">ＨＰ</a>｜<a href="https://yoga.kuchihiro.com/kuchikomi-c-'+clinic_array["page_id"]+'/">口コミ</a>';
				 //map.addOverlay(marker); 
				 clusterer.AddMarker(marker,class_title,class_subtitle);
				  bounds.extend(point);
		}
		// ===== determine the zoom level from the bounds =====
        map.setZoom(map.getBoundsZoomLevel(bounds));
		
        // ===== determine the centre from the bounds ======
        var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
        var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
        map.setCenter(new GLatLng(clat,clng));
	}
	}
	request.send(null);
	
}

function createMarker(point, clinic_array,icon) {
	var marker = new GMarker(point,icon);

	//var clinic_url="<a href=\""+clinic_array["clinic_url"]+"\">お店のホームページ</a>";
	//var html = "<div style=\"width: 250px\"><b>"+clinic_array["clinic_name"]+"</b><br>"+clinic_array["address"]+"<br><a href=\""+clinic_array["detail_url"]+"\">詳細ページ</a><br>"+clinic_url+"</div>";
		var html = '<div id="info_window" style="width: 300px;">';
	if(clinic_array['image_url']){
		html+='<p><img src="thumb_nail/'+clinic_array['image_url']+'"></p>';
	}
	html+='<p class="clinic_name">'+clinic_array["clinic_name"]+'</p>';
	html+='<p class="address">'+clinic_array["address"]+'</p>';
	html+='<p class="list"><a href="'+clinic_array["detail_url"]+'">詳細</a> | ';
	html+='<a href="'+clinic_array["clinic_url"]+'">教室HP</a> | ';
	html+='<a href="https://yoga.kuchihiro.com/kuchikomi-c-'+clinic_array['page_id']+'/">口コミ</a></p>';
	html+='</div>';
	
	GEvent.addListener(marker, "click", function() {
  		marker.openInfoWindowHtml(html);
	});
	
	marker_arr[j] = marker;
	clinic_datas[j]=clinic_array;
	htmls[j] = html;
	
	j++;
	
	return marker;
}

function getDetail(i){
	map.setZoom(17);
	map.setCenter(marker_arr[i].getPoint());
	marker_arr[i].openInfoWindowHtml(htmls[i]);
}

//]]>