じゃらん 宿・ホテル予約サイト
 じゃらんnetトップ じゃらんnetのご利用方法 ご要望・お問合せ
宿・ホテル予約TOP > じゃらんWebサービス > チュートリアル > 2. ある地点(緯度、経度)の近くの宿泊施設を検索するには

じゃらんWebサービス/チュートリアル

APIリファレンス

ある地点(緯度、経度)の近くの宿泊施設を検索するには

世界測地系(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);
}
参考:APIにおける世界測地系(Google Groups)
(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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzExMzQ3ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>話題の丸の内エリア!皇居の杜と夜空に煌くビル群の夜景</HotelCatchCopy>
    <HotelCaption>都心にありながら、皇居の目前という閑静な場所に建つ。窓を開ければ東京の摩天楼が広がりとてもロマンティック。銀座や東京駅に程近くビジネスや観光拠点として便利。落ち着いたインテリアも好評。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do??key=**********&rd_key=MzQ1OTA5ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>東京駅前のオアシスホテル〜夜景に癒され、満ち足りた時間を。</HotelCatchCopy>
    <HotelCaption>客室には三層ガラスを採用し、静寂で上質な空間を実現しました。客室は205室。大きなホテルではありませんが「東京コンシェルジュ」としてこの街を熟知し、きめ細やかな心でご案内いたします。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzYzNzk4ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>東京駅から徒歩3分、何処へ行くにも交通至便。04年リニューアル</HotelCatchCopy>
    <HotelCaption>自然の素材である石、木葉などをモチーフにした、こだわりの空間。癒しとくつろぎをテーマにした心地良い空間が様々なシーンを演出。2004年7月全室リニューアルオープン。Check Out11時でゆったりできる。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzQ3OTAyICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>銀座ステイにかかせないこの立地とヨーロピアンシックな雰囲気</HotelCatchCopy>
    <HotelCaption>大正ロマン的な銀座を感じる外観に、全家具調度品はヨーロッパからの特注品という趣あるホテル。セミWのベッドも140cmとワイド。モダンな雰囲気でミラノからの家具を配置した新館も素敵。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzM3MTY0ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>東京駅から徒歩5分。都内を自由自在にアクセスできる立地が魅力</HotelCatchCopy>
    <HotelCaption>8駅が徒歩圏内にあり、ビジネスの移動はもちろん、ショッピング・映画鑑賞・観劇・観光などあらゆる遊びの目的を選ぶのに最適なロケーション。タウン感覚でリゾート気分を満喫できる快適さ・安心を提供。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzQ1NjI3ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>2005年3月19日オープン。東京駅徒歩3分、最新型の洗練されたホテル</HotelCatchCopy>
    <HotelCaption>全室12平米以上のゆったりとした間取りで、和風モダンを基調とし洗練された客室には20インチ液晶TVやシモンズのベッドなどを配置。全室高速インターネット対応可能で全館活水器を使い体にも優しい。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzE5MDYzICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>神田駅南口より徒歩1分。気軽に利用できる交通至便なホテル</HotelCatchCopy>
    <HotelCaption>JR山手線・中央線、地下鉄銀座線・半蔵門線など都心主要線の神田駅から徒歩5分圏内で、ビジネス・レジャーの拠点に最適な好立地ホテル。快適で機能的な施設と設備が整い、気軽に利用できる安心ホテル。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzIzMTIwICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>日本のシャンゼリゼ銀座にパリのエスプリ、メルキュールホテル登場</HotelCatchCopy>
    <HotelCaption>10月で開業1周年を迎えるフランスのブランドホテル。ビストロダイニング「レ シャンソン」も好評。地下鉄銀座一丁目駅11番出口に直結しており、ショッピング・ビジネスに最高の立地!TDRにもアクセス良好</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzIzMzg1ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>ヨーロピアン名雰囲気の女性なら1度は泊ってみたい、憧れのホテル</HotelCatchCopy>
    <HotelCaption>設計・デザイン・家具選定まですべてを女性デザイナーが担当したエレガントな雰囲気。女性向けアメニティが揃う女性優先&禁煙フロアあり。銀座中央通りへ徒歩1分。</HotelCaption>
    <PictureURL>http://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>http://www.jalan.net/JwsRedirect.do?key=**********&rd_key=MzYxNjk4ICAgIDAwMDE=</HotelDetailURL>
    <HotelCatchCopy>東京駅・日本橋口より700m。伝統ある都心の隠れ家的なホテル</HotelCatchCopy>
    <HotelCaption>JR新日本橋駅から1分、地下鉄三越前駅・小伝馬町〜5分で都内のどこに行くにも便利。1階のオーベルジュ・ド・ニレーヌではコース料理、朝食が好評。創業は百十余年の伝統を誇る。全室ネット接続無料</HotelCaption>
    <PictureURL>http://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();
}


ビジネスホテル高級ホテル温泉・露天風呂ペットとホテル宿・ホテル一覧レンタカーツアー航空券高速バス・夜行バス旅行・観光ガイド