﻿//googlemap　script
//各医院大マップ用

// アイコンの設定
	var baseIcon = new GIcon();
	baseIcon.shadow = "../commonsource/images/pin_shadow.png";
	baseIcon.iconSize = new GSize(26, 26);
	baseIcon.shadowSize = new GSize(26, 26);
	baseIcon.iconAnchor = new GPoint(7, 23);
	baseIcon.infoWindowAnchor = new GPoint(5, 1);

    var markers;
    var infoHtml;
    var map;

function gmap() {
	//パネル表示
    var panel = document.getElementById('panel');

	//地図表示の設定
    map = new GMap(document.getElementById("map"));
    //map.addControl(new GScaleControl());	//距離スケールを出したいときは行頭の//をはずす
	map.addControl(new GLargeMapControl());	//左のコントローラーを大きなモノに
    //map.addControl(new GMapTypeControl());	//右上にマップ切り替えボタンを表示
    //map.setMapType( _SATELLITE_TYPE );	//衛星画像モードで表示したいときは行頭の//をはずす
    map.centerAndZoom(new GPoint(135.49678802490234, 34.68319328648835), 6);	//マップの中心位置とズームレベルを設定

	//ここからxmlの設定
	var request = GXmlHttp.create();
	request.open("GET", "../commonsource/gmap/markers.xml", true);	//htmlからの相対又はURLで指定
	request.onreadystatechange = function() {
      	if (request.readyState == 4) {
      		var xmlDoc = request.responseXML;
			var markerElements = xmlDoc.documentElement.getElementsByTagName("marker");	//タグの先頭

			markers = new Array( markerElements.length );
			infoHtml = new Array( markerElements.length );

				//呼び出す要素の名前を指定
			for (var i = 0; i < markerElements.length; i++) {
				var Lat = parseFloat(markerElements[i].getAttribute("lat"));
				var Lng = parseFloat(markerElements[i].getAttribute("lng"));
				var Cmt = markerElements[i].getAttribute("cmt");
				var Name = markerElements[i].getAttribute("name");
				var Link = markerElements[i].getAttribute("link");
				var Phone = markerElements[i].getAttribute("phone");
				var Code = markerElements[i].getAttribute("code");
				var Photo = markerElements[i].getAttribute("photo");

				//codeの数字（テキストでも可）によって表示するアイコンを変更
				if (Code == "3")	{
					baseIcon.image = "../commonsource/images/pin.png";
				} else	if(Code == "2"){
					baseIcon.image = "../commonsource/images/pin.png";
				} else	{
					baseIcon.image = "../commonsource/images/pin.png";
				}
			
				markers[i] = new GMarker( new GPoint( parseFloat(Lng), parseFloat(Lat) ), baseIcon);

				// セレクタ適応_開始
				infoHtml[i] = "<div class='gmapinfo'>";

				// クリックされたときのInfomation Windowの内容
				infoHtml[i]  +=  "<b>" + Name + "</b> ";

				//Linkがあった場合、Blogアイコンにリンクを貼って表示
				if (markerElements[i].getAttribute("link") != null)
				{
					infoHtml[i] += "&nbsp;&nbsp;<a href='" + Link + "' target=_new><img src='../commonsource/images/link.png' border='0' /></a>";
				}

				infoHtml[i] += "<br />" + Phone + "<br />" + Cmt + "";

				//写真があったら表示
				if (markerElements[i].getAttribute("photo") != null)
				{
					infoHtml[i] += "<br /><br /><img src='img/" + Photo + ".jpg' width='200' height='150'>";
				}

				// セレクタ適応_終了
				infoHtml[i] += "</div>";

				//パネルの表示内容
				GEvent.addListener( markers[i], 'click', makeOpenerCaller(i) );
				map.addOverlay( markers[i] );

				var html = "<a href='javascript:allopener(" + i + ")' ><img src='" + baseIcon.image + "' border='0'>&nbsp;" + Name +" : " + Phone + "</a><br>";
				panel.innerHTML += html;

			}
		}
	}
      request.send(null);

}

//InfomationWindow周りの記載
function createMarker(point, html) {
	var marker = new GMarker(point, baseIcon);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	return marker;
}

function allopener(i){
	markers[i].openInfoWindowHtml( infoHtml[i] );
}

function makeOpenerCaller( i )
{
	return function() { allopener( i ); };
}

    
