<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="全国温泉ガイド"
                description="日本全国約2400カ所の温泉地をご案内 - Information about hot springs in Japan"
                author="株式会社ゆとりっぷ YujiUzuhashi"
                author_email="onsenfan+yutrip@gmail.com"
                author_location="Yokohama, Japan"
                screenshot="http://www.onsenfan.com/png/mapplet_280_280.png"
                thumbnail="http://www.onsenfan.com/png/mapplet_120_60.png"
                author_affiliation="Yutrip_v0.2_20100214"
                title_url="http://www.onsenfan.com/"
                >
  <Require feature="sharedmap"/>
</ModulePrefs>
<Content type="html"><![CDATA[
<style>
body { font-size: 14px }
.resultContainer { width:90%; float:left; clear:left; font-size: 10px;  }
.spaname { font-weight: bold; font-size: 14px; }
.address { color: #666666; font-size: 12px }
.poweredby { font-size: 12px }
table { border-collapse: collapse }
table, th, td { border: 1px solid #999999 }
</style>
<div style="font-size:14px;font-weight:bold;">最寄り温泉検索</div>
地図をドラッグすると最寄り温泉地を検索・表示します。<br>
<div style='margin:5px;'>
<div style="font-size:12px;font-weight:bold;">都道府県から検索</div>
<select id="pref">
 <option value="0">--select--
 <option value="1">北海道
 <option value="2">青森県
 <option value="3">岩手県
 <option value="4">宮城県
 <option value="5">秋田県
<option value="6">山形県
<option value="7">福島県
<option value="8">茨城県
<option value="9">栃木県
<option value="10">群馬県
<option value="11">埼玉県
<option value="12">千葉県
<option value="13">東京都
<option value="14">神奈川県
<option value="15">新潟県
<option value="16">富山県
<option value="17">石川県
<option value="18">福井県
<option value="19">山梨県
<option value="20">長野県
<option value="21">岐阜県
<option value="22">静岡県
<option value="23">愛知県
<option value="24">三重県
<option value="25">滋賀県
<option value="26">京都府
<option value="27">大阪府
<option value="28">兵庫県
<option value="29">奈良県
<option value="30">和歌山県
<option value="31">鳥取県
<option value="32">島根県
<option value="33">岡山県
<option value="34">広島県
<option value="35">山口県
<option value="36">徳島県
<option value="37">香川県
<option value="38">愛媛県
<option value="39">高知県
<option value="40">福岡県
<option value="41">佐賀県
<option value="42">長崎県
<option value="43">熊本県
<option value="44">大分県
<option value="45">宮崎県
<option value="46">鹿児島県
<option value="47">沖縄県
</select>
<input type="button" value="検索" onClick="javascript:searchByPref();">
</div>
<div id="tlResults"></div>
<br>
<span class="poweredby">Powered by <a href="http://www.onsenfan.com/" target="onsenfan">全国温泉ガイド</a>/<a href="http://www.yutrip.co.jp/" target="yutrip">株式会社ゆとりっぷ</a></span><br>
<script>
// Creates a marker at the given point with the given name
function createMarker(point, number, addon) {
  var markerImg = "http://www.onsenfan.com/png/g_onsen20.png";
  var icon = new GIcon(G_DEFAULT_ICON, markerImg);
  icon.shadow     = "http://www.onsenfan.com/png/1x1_2bit.png";
  icon.shadowSize = new GSize(1, 1);
  icon.iconSize   = new GSize(20, 20);
  icon.iconAnchor = new GPoint(8, 8);
  
  var marker = new GMarker(point, {icon: icon, title: addon});
  //
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(number);
  });
  return marker;
}

  // Center the map in the Mediterranean and zoom out to a world view
  var map = new GMap2();
  //初期位置
  var point = new GLatLng(35.0, 135.0);
  map.setCenter(point, 7);
  
  // Add a marker to the center of the map
  //十字アイコン作成
  var centerm = new GIcon();
  centerm = new GIcon();
  centerm.image = "http://www.onsenfan.com/gif/center.gif";
  centerm.iconSize = new GSize(22, 22);
  centerm.iconAnchor = new GPoint(11, 11);
  var markerc = new GMarker(point, {icon:centerm});
//map.addOverlay(markerc);
  
  //地図移動で十字アイコン追随と、座標を表示
  GEvent.addListener(map, "dragend", function() { 
    //現在のズーム値を取得
    map.getZoomAsync(function(zoom) {
      if(zoom > 6) {
        //四隅を取得
        map.getBoundsAsync(function(bounds) {
          var southWest = bounds.getSouthWest();
          var northEast = bounds.getNorthEast();
          //全アイコンを削除
          map.clearOverlays();
          //周辺検索
          var url = "http://www.onsenfan.com/gspa.htm?minX=" + southWest.lng() + "&minY=" + southWest.lat()  + "&maxX=" + northEast.lng() + "&maxY=" + northEast.lat();
          //検索中を表示
          clearResultsHTML();
          var tlResultsDiv = document.getElementById("tlResults");
          var html = "検索中...";
          tlResultsDiv.innerHTML = html;
          //検索スクリプト呼び出し
          // GETメソッドでurlを非同期(true)に開く
          _IG_FetchXmlContent(url, function(response) {
            //
            var points = response.getElementsByTagName("point");
            
            var html = "";
            if(points.length) {
              html += "<hr><table border=\"1\" width=\"80%\">";
            }
            else {
              html += "みつかりませんでした。";
            }
            var tlResultsDiv = document.getElementById("tlResults");
            for (var i = 0; i < points.length; i++) {
              var point    = points.item(i);
              var lat      = point.getAttribute("lat");
              var lng      = point.getAttribute("lng");
              var spaurl   = point.getAttribute("url");
              var spaaddr  = point.getAttribute("addr");
              var latlng = new GLatLng(lat, lng);
              var spaname = point.firstChild.nodeValue;
              //ポップアップHTML編集
              var html2 = "<strong>" + spaname + "</strong><br /><a href=\"" + spaurl + "\" target=\"_blank\"><font size=\"-1\">&raquo;詳細な情報...</font></a>";
              //アイコンを配置
              map.addOverlay(createMarker(latlng, html2, spaname));
              //解説HTML編集
              html += "<tr><td>";
              html += "<img src=\"http://www.onsenfan.com/png/g_onsen20.png\"><span class='spaname'>" + spaname + "</span>&nbsp;";
              html += "<span class='address'>" + spaaddr + "</span>";
              html += "<div class='resultContainer'>";
              html += "　<a href=\"" + spaurl + "\" target=\"spa" + (i+1) + "\">&raquo;詳細情報 / 旅館・ホテル...</a><br>";
              html += "</div></td></tr>";
            }
            if(points.length) {
              html += "</table>";
            }
            //解説HTML出力
            clearResultsHTML();
            tlResultsDiv.innerHTML = html;
            html = null;
            tlResultsDiv = null;
            //中心点に十字アイコン配置
            map.getCenterAsync(function(center) {
              markerc = new GMarker(center, {icon:centerm});
              map.addOverlay(markerc);
            });
          });
        });
      }
      else {
        removeOverlay(markerc);
      }
    });
  });
  //地図移動で十字アイコン追随と、座標を表示
  GEvent.addListener(map, "moveend", function() { 
    //十字アイコン消去
    map.removeOverlay(markerc);
    //中心点に十字アイコン配置
    map.getCenterAsync(function(center) {
      markerc = new GMarker(center, {icon:centerm});
      map.addOverlay(markerc);
    });
  });
  
  //都道府県コードから検索
  searchByPref = function() {
    //都道府県コード取得
    var tdfk = document.getElementById('pref').value;
    //都道府県コードチェック
    //範囲外なら何もしない
    if((tdfk > 0) && (tdfk < 48)) {
      //全アイコンを削除
      map.clearOverlays();
      //都道府県BOXから検索させる　中心緯度経度ももらえる
      var url = "http://www.onsenfan.com/gspa2007.htm?tdfk=" + tdfk;
      //検索中を表示
      clearResultsHTML();
      var tlResultsDiv = document.getElementById("tlResults");
      var html = "検索中...";
      tlResultsDiv.innerHTML = html;
      //検索スクリプト呼び出し
          // GETメソッドでurlを非同期(true)に開く
          _IG_FetchXmlContent(url, function(response) {
            //
            var points = response.getElementsByTagName("point");
            var centp = response.getElementsByTagName("center");
            var point    = centp.item(0);
            var lat      = point.getAttribute("lat");
            var lng      = point.getAttribute("lng");
            //ズーム値・センター位置を設定
            var latlng = new GLatLng(lat, lng);
            if(tdfk == 1) {
              map.setCenter(latlng, 7);
            }
            else {
              map.setCenter(latlng, 9);
            }
            //
            var html = "";
            if(points.length) {
              html += "<hr><table border=\"1\" width=\"80%\">";
            }
            else {
              html += "みつかりませんでした。";
            }
            var tlResultsDiv = document.getElementById("tlResults");
            for (var i = 0; i < points.length; i++) {
              var point    = points.item(i);
              var lat      = point.getAttribute("lat");
              var lng      = point.getAttribute("lng");
              var spaurl   = point.getAttribute("url");
              var spaaddr  = point.getAttribute("addr");
              var latlng = new GLatLng(lat, lng);
              var spaname = point.firstChild.nodeValue;
              //ポップアップHTML編集
              var html2 = "<strong>" + spaname + "</strong><br><a href=\"" + spaurl + "\" target=\"_blank\"><font size=\"-1\">&raquo;詳細な情報...</font></a>";
              //アイコンを配置
              map.addOverlay(createMarker(latlng, html2, spaname));
              //解説HTML編集
              html += "<tr><td>";
              html += "<img src=\"http://www.onsenfan.com/png/g_onsen20.png\"><span class='spaname'>" + spaname + "</span>&nbsp;";
              html += "<span class='address'>" + spaaddr + "</span>";
              html += "<div class='resultContainer'>";
              html += "　<a href=\"" + spaurl + "\" target=\"spa" + (i+1) + "\">&raquo;詳細情報 / 旅館・ホテル...</a><br>";
              html += "</div></td></tr>";
            }
            if(points.length) {
              html += "</table>";
            }
            //解説HTML出力
            clearResultsHTML();
            tlResultsDiv.innerHTML = html;
            html = null;
            tlResultsDiv = null;
            //中心点に十字アイコン配置
            map.getCenterAsync(function(center) {
              markerc = new GMarker(center, {icon:centerm});
              map.addOverlay(markerc);
            });
          });
    }
  };
clearResultsHTML = function()
{
	var tlResultsDiv = document.getElementById("tlResults");
	tlResultsDiv.innerHTML = "";
	tlResultsDiv = null;
}
</script>

]]></Content>
</Module>

