//window.onload = onLoad;

function load() {

  if (GBrowserIsCompatible()) {

      var baseIcon = new GIcon();
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.iconSize = new GSize(20, 34);
      baseIcon.shadowSize = new GSize(37, 34);
      baseIcon.iconAnchor = new GPoint(9, 34);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      baseIcon.infoShadowAnchor = new GPoint(18, 25);

      var sidebar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl(true));
      map.setCenter(new GLatLng(42.751046,141.328468), 12);
      map.enableScrollWheelZoom();
      map.addControl(new GScaleControl());

      function createMarker(point,label,name,html,index) {
        var letter = String.fromCharCode("A".charCodeAt(0) + index);
        var icon = new GIcon(baseIcon);
        icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
        var marker = new GMarker(point, icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml('<div style="white-space:nowrap;">'+html+'<\/div>', '"Marker <b>" + letter + "<\/b>"');
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        sidebar_html += '<div class="label">' + label + '<\/div><a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
        i++;
        return marker;
      }
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+htmls[i]+'<\/div>');
      }
      function Adentro(i) { 
        map.setCenter(gmarkers[i].point,16);
      }
      function Fuera(i) { 
        map.setCenter(gmarkers[i].point,12); 
      } 

// === 観光案内所 ===
            var point = new GLatLng(42.772727,141.404249);
            var label = '観光案内所';
            var html = '<strong>支笏洞爺国立公園<br />支笏湖ビジターセンター<\/strong><br /><br />支笏湖周辺の自然を展示解説し、そこに生息している生き物、<br />高山植物、花や木のほか湖の形や性質を知ることもできます。<br />支笏湖周辺の情報・知識をゲットしましょう。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/A55.png" width="11" height="18" />支笏湖ビジターセンター', html, 0);
            map.addOverlay(marker);

// === 登山 ===
            var point = new GLatLng(42.82457,141.345484);
            var label = '登山'; // カテゴリーなしの時は空白
            var html = '<strong>イチャンコッペ山<\/strong><br /><br />山頂まで：約2時間40分<br /><br />美しい支笏湖や大自然を眺めながら、登山道を歩きます。<br />急斜面が少なく初心者向けの山と言えるでしょう。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/B55.png" width="11" height="18" />イチャンコッペ山', html, 1);
            map.addOverlay(marker);

            var point = new GLatLng(42.793993,141.285743);
            var label = '';
            var html = '<strong>恵庭岳<\/strong><br /><br />第2見晴台まで：約3時間<br /><br />恵庭岳はアイヌ語でエ・エン・イワ（頭の尖った岩山の意）<br />そのままの山容で、支笏湖一帯では最高峰の1,320mの山です。<br />頂上東向きに今も噴気が見られる火口があります。<br />1972年冬季オリンピック大会では滑降のコースに指定され、<br />山頂からオコタンペ湖が眺望できます。<br />登山は一般向きとされていますが、中級者向きといえるでしょう。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/C55.png" width="11" height="18" />恵庭岳', html, 2);
            map.addOverlay(marker);

            var point = new GLatLng(42.794434,141.394223);
            var label = ''; 
            var html = '<strong>紋別岳<\/strong><br /><br />気軽に登れる高さ（標高866ｍ）なので、<br />家族に人気のある山です。<br />頂上からは太平洋、日本海が眺望できます。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/D55.png" width="11" height="18" />紋別岳', html, 3);
            map.addOverlay(marker);

            var point = new GLatLng(42.744743,141.444755);
            var label = '';
            var html = '<strong>丸山遠見<\/strong><br /><br />湖畔～丸山遠見櫓まで：車で20分<br /><br />標高327.4mと低いですが、<br />樽前山と山麓に広がる樹海の眺望は必見です。<br />（6月～10月頃まで）<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/E55.png" width="11" height="18" />丸山遠見', html, 4);
            map.addOverlay(marker);

            var point = new GLatLng(42.690955,141.376391);
            var label = '';
            var html = '<strong>樽前山<\/strong><br /><br />湖畔～七合目まで：車で20分<br />七合目～外輪山（東峰）：約50分<br />シシャモナイ登山口～外輪山（西峰）：約1時間40分<br /><br />七合目に駐車場があり、手軽に登ることができます。<br />七合目以上は高山植物のお花畑になっており、<br />山頂からは勇払原野、支笏湖、羊蹄山、日高山脈<br />などを眺望することができます。活火山なので、火<br />山情報に注意してください。場合によっては登山<br />禁止になる場合がございます。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/F55.png" width="11" height="18" />樽前山', html, 5);
            map.addOverlay(marker);

            var point = new GLatLng(42.717292,141.358675);
            var label = '';
            var html = '<strong>風不死岳<\/strong><br /><br />樽前山ヒュッテ～峰北鞍部まで：約1時間50分<br />峰北鞍部～山頂まで：約2時間<br /><br />風不死（ふっぷし）の名前の由来はアイヌ語の<br />フプ・ウシ（トドマツの多い意味）からきています。<br />一般的なコースは、樽前ヒュッテから入り、その他<br />の大沢コースは経験者の同伴が必要です。登山時に<br />は、事前に樽前ヒュッテにて情報を収集することが<br />大事です。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/G55.png" width="11" height="18" />風不死岳', html, 6);
            map.addOverlay(marker);

// === 大自然を見て楽しむ ===
            var point = new GLatLng(42.802013,141.257779);
            var label = '大自然を見て楽しむ';
            var html = '<strong>オコタンペ湖<\/strong><br /><br />奥支笏の深い森に包まれた神秘の湖<br />周囲約5Km、面積約0.4Km2、最大水<br />深約20m、水面標高572m。遊歩道<br />があり、恵庭岳が湖面に映る風景は<br />まさに感動をあなたに与えます。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/H55.png" width="11" height="18" />オコタンペ湖', html, 7);
            map.addOverlay(marker);

            var point = new GLatLng(42.710191,141.37928);
            var label = '';
            var html = '<strong>高山植物<\/strong><br /><br />風不死・恵庭・樽前の山々に見られる高山植物とし<br />ては、ミヤマハンノキ・ミネヤナギ・タカネナナカ<br />マド・マルバシモツケ・イソツツジ・エニワゼキショ<br />ウ・タルマイソウ・タルマイスゲなどがあります。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/I55.png" width="11" height="18" />高山植物', html, 8);
            map.addOverlay(marker);

            var point = new GLatLng(42.713296,141.319164);
            var label = '';
            var html = '<strong>苔の洞門<\/strong><br /><br />樽前山の噴火によって生じた溶結凝灰岩が侵食に<br />よって約4kmの涸れた峡谷を造っています。<br />両側の岸壁には30種類のコケが密生し、幻想的な<br />緑の世界を造り出しています。<br /><br />※一部崩落のため入口にての観覧となります。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/J55.png" width="11" height="18" />苔の洞門', html, 9);
            map.addOverlay(marker);

            var point = new GLatLng(42.763272,141.426272);
            var label = '';
            var html = '<strong>ウダイカンバの人工林<\/strong><br /><br />昭和29年の風害跡地に植林された林で、優美<br />な姿を一目見ようと多くの人が訪れています。<br />ウダイとは（鵜松明の略）で樹皮がよく燃え、束ね<br />てたいまつとして雨中で使用しても火が消えにくく、<br />特に鵜飼いには具合が良い木材として使用され<br />た事からこの様な名前が付いたようです。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/K55.png" width="11" height="18" />ウダイカンバの人工林', html, 10);
            map.addOverlay(marker);

            var point = new GLatLng(42.724065,141.255684);
            var label = '';
            var html = '<strong>巨木の森<\/strong><br /><br />樹齢300年以上のカツラ・ミズナラの大木がそび<br />え立つ姿は圧巻！！<br />近くに美笛キャンプ場があり、車を止めて壮大な<br />自然のたくましさを感じながらの散策がオススメ！<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/L55.png" width="11" height="18" />巨木の森', html, 11);
            map.addOverlay(marker);

            var point = new GLatLng(42.76973,141.404471);
            var label = '';
            var html = '<strong>野鳥の森<\/strong><br /><br />支笏湖温泉湖畔と中モラップを結ぶ<br />約1.5kmの観察歩道が整備されおり、<br />2ヶ所の野鳥観察舎ではこの森に住<br />む野鳥等が見られます。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/M55.png" width="11" height="18" />野鳥の森', html, 12);
            map.addOverlay(marker);

            var point = new GLatLng(42.811144,141.36692);
            var label = '';
            var html = '<strong>野生の動物<\/strong><br /><br />深い森におおわれた支笏湖一帯は、<br />ヒグマ、キタキツネ、エゾリス、<br />シマリス、鳥類では、クマゲラ、<br />アカゲラ、などのキツツキ類をは<br />じめ、オジロワシ、フクロウ、エ<br />ゾライチョウ、など多種類にわたっ<br />ています。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/N55.png" width="11" height="18" />野生の動物', html, 13);
            map.addOverlay(marker);

// === 釣り・キャンプ ===
            var point = new GLatLng(42.770943,141.271648);
            var label = '釣り・キャンプ';
            var html = '<strong>オコタン野営場<\/strong><br /><br />奥支笏湖に位置する野営場で、<br />湖畔ではカヌーが楽しめ、<br />オコタンペ川河口は、<br />ルアー・フライのポイントと<br />して人気があります。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/O55.png" width="11" height="18" />オコタン野営場', html, 14);
            map.addOverlay(marker);

// === 温泉 ===
            var point = new GLatLng(42.774109,141.403323);
            var label = '温泉';
            var html = '<strong>支笏湖温泉<\/strong><br /><br />庭園露天風呂付客室と貸切露天風呂が魅<br />力の高級和風ホテルや、ユースホステル<br />など、目的に合わせて選べる施設が充実。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/P55.png" width="11" height="18" />支笏湖温泉', html, 15);
            map.addOverlay(marker);

            var point = new GLatLng(42.782278,141.312866);
            var label = '';
            var html = '<strong>伊藤温泉<\/strong><br /><br />支笏湖北岸に面した温泉宿です。<br />露天風呂は湖に岩一枚を隔てた<br />野趣あふれる造りとなっています。<br />子宝の湯としても女性に人気。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/Q55.png" width="11" height="18" />伊藤温泉', html, 16);
            map.addOverlay(marker);

            var point = new GLatLng(42.780403,141.31031);
            var label = '';
            var html = '<strong>丸駒温泉<\/strong><br /><br />支笏湖畔でもっとも古い大正4年創業の老舗旅館。<br />恵庭岳の山麓にあるというロケーションの良さ、<br />そして、創業時代から変わらぬ天然露天風呂が<br />人気を集めています。<br /><br />[<a href="javascript:Adentro('+i+');">zoom in<\/a>] - [<a href="javascript:Fuera('+i+');">zoom out<\/a>]';
            var marker = createMarker(point, label, '<img src="img/R55.png" width="11" height="18" />丸駒温泉', html, 17);
            map.addOverlay(marker);

      document.getElementById("sidebar").innerHTML = sidebar_html;
  }
}