ある地点(緯度、経度)の近くの宿泊施設を検索するには
世界測地系(WGS84)で指定された緯度・経度を日本測地系に変換し、その付近の宿泊施設を検索するための手順です。
※ 世界測地系(WGS84)・日本測地系への変換については、Google Groupsの
「
APIにおける世界測地系 」
を参考にしております。
より正確に変換を行いたい場合は、
国土地理院 などを参考にしてください。
作成手順
(1) 検索フォームの作成
(1) - 1
緯度(度、分、秒)・経度(度、分、秒)・範囲(km)を入力するフォームを作成します。
地点・範囲検索では、緯度・経度・範囲が検索の必須条件となっているので、それぞれの入力項目を作成します。
将来、GoogleMapなどから世界測地系の座標を受け取ったときのために、入力は世界測地系の値を入力するようにします。
【サンプルコード】
<form name="frmSearch">
<table>
<tr class="inputRow">
<th>緯度:</th>
<td>
<input type="text" name="y_rad" class="num" size="5" maxlength="2" value="35">度
<input type="text" name="y_min" class="num" size="5" maxlength="2" value="40">分
<input type="text" name="y_sec" class="num" size="10" maxlength="6" value="52.9">秒
</td>
</tr>
<tr class="inputRow">
<th>経度:</th>
<td>
<input type="text" name="x_rad" class="num" size="5" maxlength="3" value="139">度
<input type="text" name="x_min" class="num" size="5" maxlength="2" value="45">分
<input type="text" name="x_sec" class="num" size="10" maxlength="6" value="58.0">秒
</td>
</tr>
<tr class="inputRow">
<th>範囲:</th>
<td>
<input type="text" name="range" class="num" size="8" maxlength="4" value="1.0">km
</td>
</tr>
<tr class="buttonRow">
<td colspan="2">
<input type="button" value="検索" onclick="javascript: search();">
<input type="button" value="Google Mapで位置を確認" onclick="javascript: linkMap();">
</td>
</tr>
</table>
</form>
(1) - 2
検索するポイントを確認するため、入力した情報をGoogleMapsで確認するボタンの処理を作成します。
【GoogleMaps送信フォーム サンプルコード】
<form name="frmLinkMap" action="http://maps.google.co.jp/maps" method="GET" target="_blank">
<input type="hidden" name="z" value="17">
<input type="hidden" name="q" value="">
</form>
【GoogleMaps実行 サンプルコード】
function linkMap()
{
var y_rad = parseFloat(document.frmSearch.y_rad.value);
var y_min = parseFloat(document.frmSearch.y_min.value);
var y_sec = parseFloat(document.frmSearch.y_sec.value);
var y = y_rad + y_min / 60 + y_sec / 3600;
var x_rad = parseFloat(document.frmSearch.x_rad.value);
var x_min = parseFloat(document.frmSearch.x_min.value);
var x_sec = parseFloat(document.frmSearch.x_sec.value);
var x = x_rad + x_min / 60 + x_sec / 3600;
document.frmLinkMap.q.value = "" + y + "," + x;
document.frmLinkMap.submit();
}
(2) 世界測地系から日本測地系に変換
(2) - 1
日本測地系←→世界測地系の変換処理を作成します。
「APIにおける世界測地系 」(Google Groups)
を参考にすると、次の式で日本測地系→世界測地系に変換ができます。
wy = jy - jy * 0.00010695 + jx * 0.000017464 + 0.0046017
wx = jx - jy * 0.000046038 - jx * 0.000083043 + 0.010040
※ wy:世界測地系 緯度、wx:世界測地系 経度、jy:日本測地系 緯度、jx:日本測地系 経度
これをもとに、次の式で逆方向の変換ができます。
jy = wy * 1.000106961 - wx * 0.000017467 - 0.004602017
jx = wx * 1.000083049 + wy * 0.000046047 - 0.010041046
※ wy:世界測地系 緯度、wx:世界測地系 経度、jy:日本測地系 緯度、jx:日本測地系 経度
【サンプルコード】
// 座標オブジェクト
function Point(_x, _y)
{
Point.prototype.x = _x;
Point.prototype.y = _y;
}
// 日本測地系(度)から世界測地系(度)に変換
// <参考資料>
// http://groups.google.com/group/Google-Maps-API-Japan/browse_thread/thread/d0ce529ce20edc4d/285aac6e0d3497a1
function ChangeLocationJapanToGlobal(jx, jy)
{
var wy = jy - jy * 0.00010695 + jx * 0.000017464 + 0.0046017;
var wx = jx - jy * 0.000046038 - jx * 0.000083043 + 0.010040;
return new Point(wx, wy);
}
// 世界測地系(度)から日本測地系(度)に変換
function ChangeLocationGlobalToJapan(wx, wy)
{
var jy = wy * 1.000106961 - wx * 0.000017467 - 0.004602017;
var jx = wx * 1.000083049 + wy * 0.000046047 - 0.010041046;
return new Point(jx, jy);
}
(3) 宿検索のリクエストクエリ(URL)を作成し、レスポンスの確認
(3) - 1
(2) - 1で作成した処理を使用し、世界測地系で入力した座標をじゃらんWebサービスで使用する日本測地系のミリ秒に変換します。
【サンプルコード】
// 値を取得
var y_rad = parseFloat(document.frmSearch.y_rad.value);
var y_min = parseFloat(document.frmSearch.y_min.value);
var y_sec = parseFloat(document.frmSearch.y_sec.value);
var y = y_rad + y_min / 60 + y_sec / 3600;
var x_rad = parseFloat(document.frmSearch.x_rad.value);
var x_min = parseFloat(document.frmSearch.x_min.value);
var x_sec = parseFloat(document.frmSearch.x_sec.value);
var x = x_rad + x_min / 60 + x_sec / 3600;
var range = parseFloat(document.frmSearch.range.value);
// 日本測地系に変換する
var jPoint = ChangeLocationGlobalToJapan(x, y);
var jx_ms = parseInt(jPoint.x * 3600 * 1000);
var jy_ms = parseInt(jPoint.y * 3600 * 1000);
(3) - 2
(3) - 2で変換した結果を、リクエストクエリ(URL)に反映させて正常にデータが取得できるかを確認します。
【サンプルリクエスト】
http://jws.jalan.net/APIAdvance/HotelSearch/V1/?order=4&xml_ptn=1&pict_size=0&key=**********&x=503169553&y=128441283&range=1
※ リクエストパラメーターのkeyについては、「**********」を取得したAPIキーに置き換えてご利用ください。
【サンプルレスポンス】
<?xml version="1.0" encoding="UTF-8" ?>
<Results xmlns="jws">
<NumberOfResults>13</NumberOfResults>
<DisplayPerPage>10</DisplayPerPage>
<DisplayFrom>1</DisplayFrom>
<APIVersion>1.2</APIVersion>
<Hotel>
<HotelID>345909</HotelID>
<HotelName>パレスホテル</HotelName>
<PostCode>100-0005</PostCode>
<HotelAddress>千代田区丸の内1−1−1</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzExMzQ3ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>話題の丸の内エリア!皇居の杜と夜空に煌くビル群の夜景</HotelCatchCopy>
<HotelCaption>都心にありながら、皇居の目前という閑静な場所に建つ。窓を開ければ東京の摩天楼が広がりとてもロマンティック。銀座や東京駅に程近くビジネスや観光拠点として便利。落ち着いたインテリアも好評。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/Y9/Y345909/Y345909048.jpg</PictureURL>
<PictureCaption>皇居に隣接し、豊かな緑とお濠に囲まれた最高の環境</PictureCaption>
<AccessInformation name="東京より">車/首都高速〜首都高速神田橋ランプ〜日比谷通りを大手町方面へ、2つめの信号を右折してすぐ 車以外/JR東京駅下車、丸の内北口より徒歩8分</AccessInformation>
<AccessInformation name="東京より">車以外/営団地下鉄・都営地下鉄大手町駅下車、C13b出口より徒歩2分</AccessInformation>
<CheckInTime>14:00</CheckInTime>
<CheckOutTime>12:00</CheckOutTime>
<X>503153303</X>
<Y>128453850</Y>
<SampleRateFrom>15120</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>ぱれすほてる</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="true"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,UFJ,VISA</CreditCard>
<NumberOfRatings>6</NumberOfRatings>
<Rating>4.3</Rating>
</Hotel>
<Hotel>
<HotelID>311347</HotelID>
<HotelName>丸ノ内ホテル</HotelName>
<PostCode>100-0005</PostCode>
<HotelAddress>東京都千代田区丸の内1−6−3</HotelAddress>
<Area>
<Region>関東・首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do??key=**********&rd_key=MzQ1OTA5ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>東京駅前のオアシスホテル〜夜景に癒され、満ち足りた時間を。</HotelCatchCopy>
<HotelCaption>客室には三層ガラスを採用し、静寂で上質な空間を実現しました。客室は205室。大きなホテルではありませんが「東京コンシェルジュ」としてこの街を熟知し、きめ細やかな心でご案内いたします。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/5/00305/00305274.jpg</PictureURL>
<PictureCaption>丸の内オアゾに2004年10月オープンの歴史あるホテル</PictureCaption>
<AccessInformation name="大阪より">車/首都高速環状線神田橋〜神田橋IC〜出口を出て、大手町方面、東京駅正面へ左折し、オアゾ方面へ左折 車以外/JR東京駅下車丸の内北口より徒歩1分(地下道直結)</AccessInformation>
<AccessInformation name="最寄り駅3">二重橋前</AccessInformation>
<AccessInformation name="補足">車/共有駐車場約300台有(有料・優待有)</AccessInformation>
<CheckInTime>15:00</CheckInTime>
<CheckOutTime>12:00</CheckOutTime>
<X>503170590</X>
<Y>128448714</Y>
<SampleRateFrom>13500</SampleRateFrom>
<LastUpdate day="30"" month="01" year="2007" />
<OnsenName />
<HotelNameKana>まるのうちほてる</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="false" UC="true"UFJ="false"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,UC,VISA</CreditCard>
<NumberOfRatings>19</NumberOfRatings>
<Rating>4.2</Rating>
</Hotel>
<Hotel>
<HotelID>363798</HotelID>
<HotelName>八重洲ターミナルホテル</HotelName>
<PostCode>103-0028</PostCode>
<HotelAddress>東京都中央区八重洲1−5−14</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzYzNzk4ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>東京駅から徒歩3分、何処へ行くにも交通至便。04年リニューアル</HotelCatchCopy>
<HotelCaption>自然の素材である石、木葉などをモチーフにした、こだわりの空間。癒しとくつろぎをテーマにした心地良い空間が様々なシーンを演出。2004年7月全室リニューアルオープン。Check Out11時でゆったりできる。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/8/00388/00388079.jpg</PictureURL>
<PictureCaption>東京駅より徒歩3分。スタイリッシュな快適空間</PictureCaption>
<AccessInformation name="東京より">車/各地の首都高速位置口から首都高環状線〜呉服橋IC〜東京駅方面へ、信号2つ目を左折、50m程の左側 車以外/JR各線東京駅下車 徒歩3分</AccessInformation>
<CheckInTime>13:00</CheckInTime>
<CheckOutTime>11:00</CheckOutTime>
<X>503187962</X>
<Y>128441999</Y>
<SampleRateFrom>5000</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>やえすたーみなるほてる</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="false" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="false" SAISON="false" UC="true"UFJ="false"VISA="true">AMEX,DC,JCB,MASTER,UC,VISA</CreditCard>
<NumberOfRatings>19</NumberOfRatings>
<Rating>4.2</Rating>
</Hotel>
<Hotel>
<HotelID>347902</HotelID>
<HotelName>ホテルモントレ銀座</HotelName>
<PostCode>104-0061</PostCode>
<HotelAddress>中央区銀座2-10-2</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>銀座・晴海・築地</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzQ3OTAyICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>銀座ステイにかかせないこの立地とヨーロピアンシックな雰囲気</HotelCatchCopy>
<HotelCaption>大正ロマン的な銀座を感じる外観に、全家具調度品はヨーロッパからの特注品という趣あるホテル。セミWのベッドも140cmとワイド。モダンな雰囲気でミラノからの家具を配置した新館も素敵。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/6/00216/00216675.jpg</PictureURL>
<PictureCaption>銀座大通から徒歩1分の好立地に佇むプチホテル</PictureCaption>
<AccessInformation name="東京より1">車/首都高速〜銀座東IC〜右折、最初の三叉路を左折し30秒 車以外/JR山手線有楽町駅下車、徒歩6分</AccessInformation>
<AccessInformation name="大阪より">車/名神、東名から首都高速へ〜銀座東IC〜右折、最初の三叉路を左折し30秒 車以外/新幹線東京駅乗換、JR山手線有楽町駅下車、徒歩6分</AccessInformation>
<AccessInformation name="最寄り駅1">銀座一丁目</AccessInformation>
<AccessInformation name="補足">車以外/地下鉄銀座線A13番口歩4分、有楽町線銀座一丁目駅11番口歩1分</AccessInformation>
<CheckInTime>15:00</CheckInTime>
<CheckOutTime>11:00</CheckOutTime>
<X>503179529</X>
<Y>128410521</Y>
<SampleRateFrom>5950</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>ほてるもんとれぎんざ</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="true"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,UFJ,VISA</CreditCard>
<NumberOfRatings>79</NumberOfRatings>
<Rating>3.9</Rating>
</Hotel>
<Hotel>
<HotelID>337164</HotelID>
<HotelName>八重洲富士屋ホテル</HotelName>
<PostCode>104-0028</PostCode>
<HotelAddress>東京都中央区八重洲2−9―1</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzM3MTY0ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>東京駅から徒歩5分。都内を自由自在にアクセスできる立地が魅力</HotelCatchCopy>
<HotelCaption>8駅が徒歩圏内にあり、ビジネスの移動はもちろん、ショッピング・映画鑑賞・観劇・観光などあらゆる遊びの目的を選ぶのに最適なロケーション。タウン感覚でリゾート気分を満喫できる快適さ・安心を提供。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/Y4/Y337164/Y337164001.jpg</PictureURL>
<PictureCaption>コンパクトながら機能的なシングルルーム</PictureCaption>
<AccessInformation name="東京より">車/首都高速道路〜京橋IC〜東京駅方面へ、外堀通り沿い5分 車以外/JR東京駅下車、八重洲南口徒歩5分</AccessInformation>
<CheckInTime>14:00</CheckInTime>
<CheckOutTime>11:00</CheckOutTime>
<X>503173207</X>
<Y>128423676</Y>
<SampleRateFrom>5500</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>やえすふじやほてる</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="true"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,UFJ,VISA</CreditCard>
<NumberOfRatings>59</NumberOfRatings>
<Rating>3.9</Rating>
</Hotel>
<Hotel>
<HotelID>345627</HotelID>
<HotelName>パールホテル八重洲</HotelName>
<PostCode>103-0028</PostCode>
<HotelAddress>東京都中央区八重洲1−2−6</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzQ1NjI3ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>2005年3月19日オープン。東京駅徒歩3分、最新型の洗練されたホテル</HotelCatchCopy>
<HotelCaption>全室12平米以上のゆったりとした間取りで、和風モダンを基調とし洗練された客室には20インチ液晶TVやシモンズのベッドなどを配置。全室高速インターネット対応可能で全館活水器を使い体にも優しい。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/Y7/Y345627/Y345627005.jpg</PictureURL>
<PictureCaption>シングルルーム</PictureCaption>
<AccessInformation name="東京より">車以外/東京駅日本橋口より徒歩3分、東京メトロ日本橋駅A1は目の前</AccessInformation>
<CheckInTime>15:00</CheckInTime>
<CheckOutTime>10:00</CheckOutTime>
<X>503191178</X>
<Y>128450236</Y>
<SampleRateFrom>6500</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>ぱーるほてるやえす</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="false"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,VISA</CreditCard>
<NumberOfRatings>46</NumberOfRatings>
<Rating>3.9</Rating>
</Hotel>
<Hotel>
<HotelID>319063</HotelID>
<HotelName>神田ステーションホテル</HotelName>
<PostCode>101-0044</PostCode>
<HotelAddress>東京都千代田区鍛冶町1−4−3</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzE5MDYzICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>神田駅南口より徒歩1分。気軽に利用できる交通至便なホテル</HotelCatchCopy>
<HotelCaption>JR山手線・中央線、地下鉄銀座線・半蔵門線など都心主要線の神田駅から徒歩5分圏内で、ビジネス・レジャーの拠点に最適な好立地ホテル。快適で機能的な施設と設備が整い、気軽に利用できる安心ホテル。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/8/00288/00288332.jpg</PictureURL>
<PictureCaption>神田駅より徒歩1分の好立地!</PictureCaption>
<AccessInformation name="東京より">車以外/JR神田駅南口下車徒歩1分。</AccessInformation>
<CheckInTime>16:00</CheckInTime>
<CheckOutTime>10:00</CheckOutTime>
<X>503186015</X>
<Y>128470896</Y>
<SampleRateFrom>5500</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>かんだすてーしょんほてる</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="false" MILLION="false" NICOS="false" SAISON="true" UC="true"UFJ="false"VISA="true">AMEX,DC,DINNERS,JCB,SAISON,UC,VISA</CreditCard>
<NumberOfRatings>16</NumberOfRatings>
<Rating>3.9</Rating>
</Hotel>
<Hotel>
<HotelID>323120</HotelID>
<HotelName>メルキュールホテル銀座東京</HotelName>
<PostCode>104-0061</PostCode>
<HotelAddress>東京都中央区銀座2−9−4</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>銀座・晴海・築地</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzIzMTIwICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>日本のシャンゼリゼ銀座にパリのエスプリ、メルキュールホテル登場</HotelCatchCopy>
<HotelCaption>10月で開業1周年を迎えるフランスのブランドホテル。ビストロダイニング「レ シャンソン」も好評。地下鉄銀座一丁目駅11番出口に直結しており、ショッピング・ビジネスに最高の立地!TDRにもアクセス良好</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/4/00324/00324884.jpg</PictureURL>
<PictureCaption>ホテルは地下鉄有楽町線「銀座一丁目駅」に直結</PictureCaption>
<AccessInformation name="東京より">車以外/地下鉄有楽町線銀座一丁目駅下車。駅に直結</AccessInformation>
<AccessInformation name="最寄り駅1">銀座一丁目</AccessInformation>
<AccessInformation name="補足">車以外/東京駅よりタクシーでワンメーター、又は有楽町駅より徒歩6分</AccessInformation>
<CheckInTime>14:00</CheckInTime>
<CheckOutTime>11:00</CheckOutTime>
<X>503178099</X>
<Y>28410580</Y>
<SampleRateFrom>8000</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>めるきゅーるほてるぎんざとうきょう</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="false"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,VISA</CreditCard>
<NumberOfRatings>44</NumberOfRatings>
<Rating>3.8</Rating>
</Hotel>
<Hotel>
<HotelID>323385</HotelID>
<HotelName>ホテルモントレ ラ・スールギンザ</HotelName>
<PostCode>104-0061</PostCode>
<HotelAddress>中央区銀座1-10-18</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>銀座・晴海・築地</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzIzMzg1ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>ヨーロピアン名雰囲気の女性なら1度は泊ってみたい、憧れのホテル</HotelCatchCopy>
<HotelCaption>設計・デザイン・家具選定まですべてを女性デザイナーが担当したエレガントな雰囲気。女性向けアメニティが揃う女性優先&禁煙フロアあり。銀座中央通りへ徒歩1分。</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/9/00469/00469854.jpg</PictureURL>
<PictureCaption>銀座の大通りから小道を入った隠れ家的プチホテル</PictureCaption>
<AccessInformation name="東京より">車/首都高速〜銀座東IC〜右折、最初の三叉路を左折し30秒 車以外/JR山手線有楽町駅下車、徒歩6分</AccessInformation>
<AccessInformation name="大阪より">車/名神、東名から首都高速へ〜銀座東IC〜右折、最初の三叉路を左折し30秒 車以外/新幹線東京駅乗換、JR山手線有楽町駅下車、徒歩6分</AccessInformation>
<AccessInformation name="最寄り駅1">銀座一丁目</AccessInformation>
<AccessInformation name="補足">車以外/地下鉄銀座線A13番口歩4分、有楽町線銀座一丁目駅11番口歩1分</AccessInformation>
<CheckInTime>15:00</CheckInTime>
<CheckOutTime>11:00</CheckOutTime>
<X>503181749</X>
<Y>128414799</Y>
<SampleRateFrom>5950</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>ほてるもんとれ らすーるぎんざ</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="true"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,UFJ,VISA</CreditCard>
<NumberOfRatings>67</NumberOfRatings>
<Rating>3.7</Rating>
</Hotel>
<Hotel>
<HotelID>361698</HotelID>
<HotelName>ホテルかずさや</HotelName>
<PostCode>103-0023</PostCode>
<HotelAddress>中央区日本橋本町4−7−15</HotelAddress>
<Area>
<Region>首都圏</Region>
<Prefecture>東京都</Prefecture>
<LargeArea>銀座・日本橋・東京駅周辺</LargeArea>
<SmallArea>東京・神田・日本橋</SmallArea>
</Area>
<HotelType>ホテル</HotelType>
<HotelDetailURL>https://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzYxNjk4ICAgIDAwMDE=</HotelDetailURL>
<HotelCatchCopy>東京駅・日本橋口より700m。伝統ある都心の隠れ家的なホテル</HotelCatchCopy>
<HotelCaption>JR新日本橋駅から1分、地下鉄三越前駅・小伝馬町〜5分で都内のどこに行くにも便利。1階のオーベルジュ・ド・ニレーヌではコース料理、朝食が好評。創業は百十余年の伝統を誇る。全室ネット接続無料</HotelCaption>
<PictureURL>https://www.jalan.net/jalan/images/pictSS/7/00357/00357271.jpg</PictureURL>
<PictureCaption>外観</PictureCaption>
<AccessInformation name="東京より">車/首都高速上野方面へ〜本町IC〜5分 車以外/山手線神田駅下車徒歩5分。地下鉄銀座線三越前駅下車徒歩5分</AccessInformation>
<AccessInformation name="最寄り駅2">新日本橋</AccessInformation>
<AccessInformation name="補足">車/駐車場は立体のため高さ制限あり。要確認。 車以外/JR総武快速線新日本橋駅下車徒歩1分。</AccessInformation>
<CheckInTime>15:00</CheckInTime>
<CheckOutTime>10:00</CheckOutTime>
<X>503200154</X>
<Y>128471541</Y>
<SampleRateFrom>3150</SampleRateFrom>
<LastUpdate day="30" month="01" year="2007" />
<OnsenName />
<HotelNameKana>ほてるかずさや</HotelNameKana>
<CreditCard AMEX="true" DC="true" DINNERS="true" ETC="false" JCB="true" MASTER="true" MILLION="false" NICOS="true" SAISON="true" UC="true"UFJ="true"VISA="true">AMEX,DC,DINNERS,JCB,MASTER,NICOS,SAISON,UC,UFJ,VISA</CreditCard>
<NumberOfRatings>55</NumberOfRatings>
<Rating>3.7</Rating>
</Hotel>
※ サンプルは、東京駅(緯度:35 度 40 分 52.9 秒 経度:139 度 45 分 58.0 秒)で範囲を 1 kmとした場合の結果です。
(4) 検索結果を画面に表示する
(4) - 1
(3)で検索結果のXMLが取得できたことが確認できました。
次は、その結果を画面に表示します。
まずは、XMLHttpを使用したリクエスト送信部分の処理を作成します。
【サンプルコード】
var xml_http = null;
// 検索実行
function search()
{
var API_URL = "http://jws.jalan.net/APIAdvance/HotelSearch/V1/";
var API_KEY = "**********"; // 取得したAPIキーを設定
// 値を取得
var y_rad = parseFloat(document.frmSearch.y_rad.value);
var y_min = parseFloat(document.frmSearch.y_min.value);
var y_sec = parseFloat(document.frmSearch.y_sec.value);
var y = y_rad + y_min / 60 + y_sec / 3600;
var x_rad = parseFloat(document.frmSearch.x_rad.value);
var x_min = parseFloat(document.frmSearch.x_min.value);
var x_sec = parseFloat(document.frmSearch.x_sec.value);
var x = x_rad + x_min / 60 + x_sec / 3600;
var range = parseFloat(document.frmSearch.range.value);
// 日本測地系に変換する
var jPoint = ChangeLocationGlobalToJapan(x, y);
var jx_ms = parseInt(jPoint.x * 3600 * 1000);
var jy_ms = parseInt(jPoint.y * 3600 * 1000);
// 検索URLの作成
var query = API_URL + "?order=4&xml_ptn=1&pict_size=0&key=" + API_KEY
+ "&x=" + jx_ms + "&y=" + jy_ms + "&range=" + range;
// 検索
document.all.Results.innerHTML = "";
try
{
xml_http = new ActiveXObject("Microsoft.XMLHTTP");
}
catch( ex )
{
try
{
xml_http = new XMLHttpRequest();
}
catch( ex2 )
{
xml_http = null;
}
}
if( xml_http == null )
{
alert("XMLHttpオブジェクトが作成できないため、検索できません");
return;
}
xml_http.OnReadyStateChange = SearchResult;
xml_http.Open("GET", query, true);
xml_http.Send();
}
また、画面には検索結果を表示するためのエリアを用意しておきます。
【サンプルコード】
<div id="Results"></div>
(4) - 2
サーバーからのレスポンスを受信した結果を表示する処理を作成します。
【サンプルコード】
// 検索結果取得
function SearchResult()
{
if( xml_http.readyState == 4 )
{
// 検索結果を表示
var str_html = "";
if( xml_http.Status == 200 )
{
var res_xml = xml_http.responseXML;
if( res_xml != null )
{
try
{
// 総件数
var res_count = res_xml.selectSingleNode("/Results/NumberOfResults").text;
var view_count = res_xml.selectSingleNode("/Results/DisplayPerPage").text;
str_html += "<div class=\"ResultsCount\">検索結果:" + res_count +
" 件<span class=\"view_count\">(うち " + view_count + "件 表示)</span></div>";
// 宿泊施設リスト
str_html += "<table class=\"HotelList\">";
str_html += "<tr><th>写真</th><th>ホテル名</th><th>住所</th><th>種別</th>";
str_html += "<th>参考料金</th><th>コメント</th><th>詳細</th><th>地図で確認</th></tr>";
var hotel_list = res_xml.selectNodes("/Results/Hotel");
for( var i = 0; i < hotel_list.length; i++ )
{
var hotel_node = hotel_list.item(i);
str_html += "<tr class=\"" + (i % 2 == 0 ? "ev" : "od") + "\">";
str_html += "<td><img src=\"" + hotel_node.selectSingleNode("PictureURL").text + "\" alt=\"" +
hotel_node.selectSingleNode("PictureCaption").text + "\" border=\"0\"></td>";
str_html += "<td>" + hotel_node.selectSingleNode("HotelName").text + "</td>";
str_html += "<td>" + hotel_node.selectSingleNode("HotelAddress").text + "</td>";
str_html += "<td>" + hotel_node.selectSingleNode("HotelType").text + "</td>";
str_html += "<td>" + hotel_node.selectSingleNode("SampleRateFrom").text + "</td>";
str_html += "<td>" + hotel_node.selectSingleNode("HotelCatchCopy").text + "</td>";
str_html += "<td><a href=\"" + hotel_node.selectSingleNode("HotelDetailURL").text
+ "\" target=\"_blank\">詳細を見る</a></td>";
str_html += "<td><button onclick=\"javascript:viewMap(" +
hotel_node.selectSingleNode("X").text + "," +
hotel_node.selectSingleNode("Y").text + ");\">地図で確認</button></td>";
str_html += "</tr>";
}
str_html += "</table>";
}
catch( ex )
{
str_html += "<div class=\"Error\">エラーが発生しました。 " + ex.description + "</div>";
}
}
else
{
str_html += "<div class=\"Error\">エラーが発生しました。 responseXML is null</div>";
}
}
else
{
str_html += "<div class=\"Error\">エラーが発生しました。 status code:" + xml_http.Status + "</div>";
}
document.all.Results.innerHTML = str_html;
xml_http = null;
}
}
(5) 宿泊施設の場所をGoogleMapsで検索する
(5) - 1
宿泊施設の場所をGoogleMapsで表示する処理を作成します。
じゃらんWebサービスの宿泊施設の位置情報は日本測地系(ミリ秒)ですので、世界測地系(度)に変換し、GoogleMapsに渡す必要があります。
【サンプルコード】
// 宿泊施設の地図を表示
function viewMap(x, y)
{
// 世界測地系に変換
var wPoint = ChangeLocationJapanToGlobal(x / 1000 / 3600, y / 1000 / 3600);
document.frmLinkMap.q.value = "" + wPoint.y + "," + wPoint.x;
document.frmLinkMap.submit();
}