ウィリアムのいたずらの、まちあるき、たべあるき

＜?xml version="1.0" encoding="utf-8"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="content-type" content="text/html;charset=utf-8" /＞
＜title＞文字スタイル、フォントのテスト＜/title＞
＜script language="javascript" type="text/javascript"＞
function changeData()
{
    // 下線なんかをひいてみる。もっと文字おおきく
    document.getElementById("midashi").style.textDecorationUnderline = true;
    document.getElementById("midashi").style.fontSize = "72px";

    // 色を赤に、イタリックボールド
    document.getElementById("setumei").style.color = "red";
    document.getElementById("setumei").style.font = "italic bold";
}
＜/script＞
＜/head＞
＜body＞
＜H1 id="midashi"＞サンプル＜/H1＞
＜P id="setumei"＞文字スタイル、フォントのテストです＜/p＞
＜input type="button" name="b1" value="テスト開始" onclick="changeData()" /＞
＜/body＞
＜/html＞

＜?xml version="1.0"＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞

＜title＞ＡＪＡＸ版？じゃらん読み取りだよ＜/title＞
＜script src="http://maps.google.com/maps?file=api&v=2&key=ここに Map API キーがはいる"
 type="text/javascript"＞＜/script＞
＜script language="javascript" type="text/javascript"＞

//************************ここから********************//

//--------------------------------------//
//	共通変数			    //
//--------------------------------------//
var	httpObj;
var	timer;		//	タイムアウト用
var	map_flg	=	0;
var 	map;		//	地図

//	マーカーセーブ用
var	markerlist = new Array(20);
var	pointlist = new Array(20);
var	HotelNameList = new Array(20);

//*==============================================//
//*	関数：Load()			  *//
//	内容：読み取り開始		           *//
//*==============================================//
function Load()
{
	//	地図初期処理
	if (GBrowserIsCompatible())
	{
		//	マップ生成
        	map = new GMap(document.getElementById("map"));

		//	ズームと衛星切り替え
		map.addControl(new GMapTypeControl());
		map.addControl(new GSmallMapControl());
		map_flg	=	1;
	}

	//	データ読み込み
	httpRequest(
 "http://jws.jalan.net/APILite/HotelSearch/V1/?key=guest&pref=130000&l_area=137100&s_area=137102&pict_size=1");


}

//*==============================================//
//*	関数：UnLoad()			  *//
//	内容：終了			  *//
//*==============================================//
function UnLoad()
{
	if ( map_flg	==	1 )
	{
		GUnload();
	}
}

//*==============================================//
//*	関数：httpRequest()		  *//
//	内容：XML読み取り開始		  *//
//*==============================================//
function httpRequest(target_url)
{
	try
	{
	      	if(window.XMLHttpRequest)
		{
			httpObj = new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			httpObj = new ActiveXObject("Microsoft.XMLHTTP");
		}
		else
		{
			alert('エラーです');
			return;
		}
	}
	catch(e)
	{
		alert('エラーです');
		return;
	}

	//	タイマーセット
	timer = setInterval("timeoutError()",60000); //60秒にセット

	//	データを取得する
	httpObj.open("GET", target_url, true);
	httpObj.onreadystatechange = DataRead;
	httpObj.send("");

	return;
}

//*==============================================//
//*	関数：timeoutError()		  *//
//	内容：タイムアウト			  *//
//*==============================================//
function timeoutError()
{
	clearInterval(timer);	//	タイマーとめる
	httpObj.abort();
	alert('タイムアウトです');
}

//*==============================================//
//*	関数：DataRead()			  *//
//	内容：XML読み取ったあと		  *//
//*==============================================//
function DataRead()
{
        if ( httpObj.readyState == 4 )
	{
		clearInterval(timer);	//	タイマーとめる
		if ( httpObj.status == 200)
		{
			DataOut();
		}
       	}
}

//*==============================================//
//*	関数：DataOut()			  *//
//	内容：書き出し			  *//
//*==============================================//
function DataOut()
{
			//	返り値ＸＭＬの取得
	xtree = httpObj.responseXML;

			//	ホテルリストの取得
	hotellist = xtree.getElementsByTagName("Hotel");

			//	書き出し
	//初期化	
	buf = "";
	total_x = 0;
	total_y = 0;
	sosu    = 0;

	for(i = 0 ; i ＜ hotellist.length ; i ++ )
	{
		//	１件分のホテルデータ取り出し
		hotelnode	= 	hotellist[i];

		//	各種データ取り出し
		PictureURL = hotelnode.selectSingleNode("PictureURL").nodeTypedValue;
		HotelName = hotelnode.selectSingleNode("HotelName").nodeTypedValue;
		HotelAddress = hotelnode.selectSingleNode("HotelAddress").nodeTypedValue;
		X = hotelnode.selectSingleNode("X").nodeTypedValue;
		Y = hotelnode.selectSingleNode("Y").nodeTypedValue;

		//	追加するホテルの行を生成
		newtr = document.createElement('tr');
		newtr.id = 'item' + i;
		document.getElementById('table').appendChild(newtr);

		//	ホテル画像
		newtd = document.createElement('td');
  		newtr.appendChild(newtd);
　		image = document.createElement('img');
  		image.src = PictureURL;
  		newtd.appendChild(image);

		//	HotelName追加
  		newtd = document.createElement('td');
  		newtr.appendChild(newtd);
　		mojiretu = document.createTextNode(HotelName);
  		newtd.appendChild(mojiretu);

		//	HotelAddress追加
  		newtd = document.createElement('td');
  		newtr.appendChild(newtd);
　		mojiretu = document.createTextNode(HotelAddress);
  		newtd.appendChild(mojiretu);

		//	地図作成
		if ( X	!=	999999999 )
		{

			// 緯度経度修正、１度＝60X60X1000=3600000ミリ秒で割る
			X /= 3600000.0;
			Y /= 3600000.0;
			//　日本測地系から世界測地系へ
			// ISBN4-7973-3287-5	３７ページ引用
			x = X - Y*0.000046038-X*0.000083043+0.010040;
			y = Y - Y*0.00010695+X*0.000017464+0.0046017;
	
			//	緯度経度設定
			point = new GPoint(x,y);

			//　表示（ここで表示しないとエラーになった）
			map.centerAndZoom(point, 0);

			//　２０個分までは、マーカーと吹き出し設定
			if ( sosu	＜	20 )
			{
				setMarker(point,sosu,HotelName);
			}
			else
			{	//	20個以上は、マーカーのみ
				marker 	= 	new GMarker(point);
				map.addOverlay(marker);
			}

			//	合計値
			total_x += x;
			total_y += y;
			sosu ++ ;
		}

	}

	//	地図を真ん中に表示する
	if ( sosu	＞	0 )
	{
		x	=	total_x / sosu;
		y	=	total_y / sosu;
		point	=	new GPoint(x,y);
		map.centerAndZoom(point, 5);
	}

}
//*==============================================//
//*	関数：setMarker(		           *//
//	内容：マーカーと吹き出し	           *//
//*==============================================//
function setMarker(point,sosu,HotelName)
{
	//	２０個以上ならやらない
	if ( sosu	＞=	20 )
	{
		return;
	}

	//	値のセーブ
	pointlist[sosu]		=	point;
	markerlist[sosu] 	= 	new GMarker(point);
	HotelNameList[sosu]	=	HotelName;

	//	吹き出しもつけてみる
	GEvent.addListener(markerlist[sosu] ,"click",
		function()
	  	{
			markerlist[sosu] .openInfoWindowHtml(HotelNameList[sosu]);
	  	}
	);

	//	マーカーをつける
	map.addOverlay(markerlist[sosu]);
}

//************************ここまで********************//
＜/script＞
＜/head＞


＜body bgcolor="#ffffff"  onload="Load()" onunload="GUnload()"＞

＜H1＞東京のお台場・汐留・竹芝あたりのホテル＜/H1＞
＜table border=1＞
	＜tbody id="table"＞
	＜/tbody＞
＜/table＞

＜P＞地図＜/P＞
＜div id="map" style="width: 500px; height: 300px"＞＜/div＞

＜/body＞
＜/html＞

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=utf-8"/＞
＜title＞北朝鮮を見てみよう！＜/title＞

＜script src="http://maps.google.com/maps?

file=api&v=2&key=ここにMap API キー"
      type="text/javascript"＞＜/script＞

＜script type="text/javascript"＞
//======================================//
//	データ読み込み		   //
//======================================//
function load()
{
	if (GBrowserIsCompatible())
	{
		//	マップ生成
        	         var map = new GMap(document.getElementById("map"));

		//	ズームと衛星切り替え
		map.addControl(new GMapTypeControl());
		map.addControl(new GSmallMapControl());

		//	緯度経度設定
		var point = new GPoint(129.6590200546948,40.85579276213259);

		//	引数の最後の数字がズーム、数字が大きいほうが高い
		//	9が限界だった
        	         map.centerAndZoom(point, 9);

		//	マークを付ける
		var marker = new GMarker(point);
		map.addOverlay(marker);
      	}
}
＜/script＞
＜/head＞
＜body onload="load()" onunload="GUnload()"＞

＜H1＞北朝鮮の図＜/H1＞
＜div id="map" style="width: 500px; height: 300px"＞＜/div＞

＜/body＞
＜/html＞

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=utf-8"/＞
＜title＞北朝鮮を見てみよう！＜/title＞

＜script src="http://maps.google.com/maps?

file=api&v=2&key=ここにMap APIキーが入る"
      type="text/javascript"＞＜/script＞

＜script type="text/javascript"＞
//======================================//
//	データ読み込み		   //
//======================================//
function load()
{
	if (GBrowserIsCompatible())
	{
		//	マップ生成
        	         var map = new GMap(document.getElementById("map"));

		//	ズームと衛星切り替え
		map.addControl(new GMapTypeControl());
		map.addControl(new GSmallMapControl());

		//	ピョンヤンの緯度経度設定
		var point = new GPoint(125.736292,39.004965);

		//	引数の最後の数字がズーム、数字が大きいほうが高い
		//	9が限界だった
        	         map.centerAndZoom(point, 9);

		//	マークを付ける
		var marker = new GMarker(point);
		map.addOverlay(marker);
      	}
}
＜/script＞
＜/head＞
＜body onload="load()" onunload="GUnload()"＞

＜H1＞北朝鮮の図＜/H1＞
＜div id="map" style="width: 500px; height: 300px"＞＜/div＞

＜/body＞
＜/html＞