//=============================================================================
var map;
var markerS = new Array();
var mapPosS = new Array();
var mapNameS = new Array();
var cirRadiusS = new Array();
var zoomValS = new Array();
var mapCenS = new Array();
var mapArea = document.getElementById('mainmap');
var circle;
var addMarkerCount = 1;				//最初のマーカー追加用カウンタ
//=============================================================================
//マップの初期化
function initMap() {
    mapPosS[00] = {lat: 34.390000, lng: 134.820000};	mapNameS[00] = "マップセンター";		cirRadiusS[00] = 0;	zoomValS[00] = 10.9; mapCenS[00] = {lat: 34.390000, lng: 134.820000};
    mapPosS[01] = {lat: 34.583912, lng: 135.017080};	mapNameS[01] = "淡路SA大観覧車";		cirRadiusS[01] = 0;	zoomValS[01] = 17;   mapCenS[01] = {lat: 34.583912, lng: 135.017080};
    mapPosS[02] = {lat: 34.579283, lng: 135.013377};	mapNameS[02] = "ハイウェイオアシス物産館";	cirRadiusS[02] = 614;	zoomValS[02] = 16.5; mapCenS[02] = {lat: 34.581597, lng: 135.015228};
    mapPosS[03] = {lat: 34.577365, lng: 135.011188};	mapNameS[03] = "ニジゲンノモリ入口";		cirRadiusS[03] = 916;	zoomValS[03] = 16.2; mapCenS[03] = {lat: 34.580638, lng: 135.014134};
    mapPosS[04] = {lat: 34.574405, lng: 135.006664};	mapNameS[04] = "県立淡路島公園";		cirRadiusS[04] = 1430;	zoomValS[04] = 15.5; mapCenS[04] = {lat: 34.579158, lng: 135.011872};
    mapPosS[05] = {lat: 34.563890, lng: 135.010062};	mapNameS[05] = "淡路夢舞台";			cirRadiusS[05] = 2340;	zoomValS[05] = 15.0; mapCenS[05] = {lat: 34.573901, lng: 135.013571};
    mapPosS[06] = {lat: 34.549648, lng: 134.937659};	mapNameS[06] = "北淡震災記念公園";		cirRadiusS[06] = 8222;	zoomValS[06] = 13;   mapCenS[06] = {lat: 34.566780, lng: 134.977369};
    mapPosS[07] = {lat: 34.504561, lng: 134.908336};	mapNameS[07] = "五斗長垣内遺跡";		cirRadiusS[07] = 13345;	zoomValS[07] = 12.6; mapCenS[07] = {lat: 34.544236, lng: 134.962708};
    mapPosS[08] = {lat: 34.416056, lng: 134.792714};	mapNameS[08] = "ウェルネスパーク五色";		cirRadiusS[08] = 27810;	zoomValS[08] = 11.5; mapCenS[08] = {lat: 34.499984, lng: 134.904897};
    mapPosS[09] = {lat: 34.302126, lng: 134.740386};	mapNameS[09] = "陸の港西淡";			cirRadiusS[09] = 40375;	zoomValS[09] = 11.2; mapCenS[09] = {lat: 34.443019, lng: 134.878733};
    mapPosS[10] = {lat: 34.241754, lng: 134.658892};	mapNameS[10] = "門崎(鳴門海峡)";		cirRadiusS[10] = 50331;	zoomValS[10] = 10.9; mapCenS[10] = {lat: 34.390000, lng: 134.820000};
    var mapOptions = {
        center: mapPosS[0],
        zoom: 10.9,
    };
    map = new google.maps.Map(mapArea, mapOptions);
    //マーカーの定義
    for (var i=0; i<11; i++) {
        markerS[i] = new google.maps.Marker({
            position: mapPosS[i],
            animation: google.maps.Animation.DROP,
            title: mapNameS[i]
        });
    }
    addMarker();
    circle = new google.maps.Circle({
        center: new google.maps.LatLng(34.583912, 135.017080),
        map: map,
        radius: cirRadiusS[1],
        fillColor: '#FF8800',
        fillOpacity: 0.1,
        strokeColor: '#FF8800',
        strokeOpacity: 0.8,
        strokeWeight: 2
    });
}
//最初のマーカーの配置
function addMarker() {
    markerS[addMarkerCount].setMap(map);
    addMarkerCount ++;
    if(addMarkerCount < 11) {
        setTimeout(addMarker, 50);
    }
}
//サークルを表示
function dispCircle(num) {
    circle.setMap(null);
    if(num > 1) {
        circle = new google.maps.Circle({
            center: new google.maps.LatLng(34.583912, 135.017080),
            map: map,
            radius: cirRadiusS[num],
            fillColor: '#FF8800',
            fillOpacity: 0.1,
            strokeColor: '#FF8800',
            strokeOpacity: 0.8,
            strokeWeight: 2
        });
    }
    map.setZoom(zoomValS[num]);
    map.setCenter(mapCenS[num]);
    //必要なマーカーのみ表示
    for (var i=0; i<11; i++) {
        markerS[i].visible = false;
    }
    dispValueData(num);
    dispPlaceData(num);
}
//数値データを表示
function dispValueData(num) {
    var str = "---";
    switch(num) {
    case 0:
           str = "---";
           for (var i=0; i<11; i++) {
               markerS[i].visible = true;
           }
           break;
    case 1:
           str = "太陽(直径139万km)を淡路SA大観覧車のところに置くと、直径12.5mの球体に相当します。";
           break;
    case 2:
           str = "水星(距離5,800万km、直径約5,000km) は、520m離れた「ハイウェイオアシス物産館」にある「直径4cmの玉」になります。";
           break;
    case 3:
           str = "金星(距離1億800万km、直径約12,100km) は、970m離れた「ニジゲンノモリ入口」にある「直径11cmの玉」になります。";
           break;
    case 4:
           str = "地球(距離1億5000万km、直径約12,700km) は、1.3km離れた「県立淡路島公園」にある「直径11cmの玉」になります。";
           break;
    case 5:
           str = "火星(距離2億2800万km、直径約6,800km) は、2.1km離れた「淡路夢舞台 野外劇場」にある「直径6cmの玉」になります。";
           break;
    case 6:
           str = "木星(距離7億8000万km、直径約143,000km) は、7.0km離れた「北淡震災記念公園」にある「直径1.3mの玉」になります。";
           break;
    case 7:
           str = "土星(距離14億3000万km、直径約120,000km) は、12.8km離れた「五斗長垣内遺跡」にある「直径1.1mの玉」になります。";
           break;
    case 8:
           str = "天王星(距離28億7500万km、直径約51,000km) は、25.8km離れた「ウェルネスパーク五色」にある「直径46cmの玉」になります。";
           break;
    case 9:
           str = "海王星(距離45億km、直径約50,000km) は、40km離れた「陸の港西淡」にある「直径45cmの玉」になります。";
           break;
    case 10:
           str = "冥王星(距離59億km、直径約2,370km) は、53km離れた「門崎(鳴門海峡)」にある「直径2cmの玉」になります。";
           break;
    }
    markerS[1].visible = true;
    markerS[num].visible = true;
    var txtArea = document.getElementById('valuedata');
    txtArea.innerHTML = "　" + str + "
";
}
//場所紹介文を表示
function dispPlaceData(num) {
    var filename1 = "nophoto.jpg";
    var filename2 = "nophoto.jpg";
    var explainst = "---";
    switch(num) {
    case 1: //淡路SA大観覧車
            explainst  = "淡路島の北の玄関口、淡路サービスエリアにある大観覧車です。
";
            explainst += "サービスエリア内に設置されている観覧車としては日本初のものです。
";
            explainst += "直径65m、海抜135mの頂上からは明石海峡大橋や、神戸空港が見渡せます。
";
            explainst += "ゴンドラの一部には等身大のわたるくん（マスコットキャラ）やアンパンマンのぬいぐるみが乗せられています。
";
            break;
    case 2: //ハイウェイオアシス物産館
            explainst  = "淡路サービスエリアは上りと下りが自由に行き来可能で、その中間地点にあるのがこの物産館です。
";
            explainst += "１階はたまねぎをはじめ、海産物などの名産品のお土産が売られています。
";
            explainst += "２階はレストランになっていて、新鮮な肉、魚、野菜のメニューが充実しています。
";
            explainst += "ここからも明石海峡大橋が一望できます。
";
            break;
    case 3: //ニジゲンノモリ入口
            explainst  = "兵庫県立淡路島公園内にあるアニメ、テクノロジー、自然をテーマとした新感覚テーマパーク。
";
            explainst += "さまざまなアトラクションやイベント、アニメキャラクター関連のショッピング、
";
            explainst += "きれいな夜空を楽しみながら宿泊まで、大人も子供もがっつり楽しめるスポットです。
";
            explainst += "写真はプロジェクションマッピングを使ったナイトウォーク入口付近の、昼間の風景です。
";
            break;
    case 4: //県立淡路島公園
            explainst  = "淡路島の北部に位置する、兵庫県立淡路島公園。自然に囲まれた東京ドームの２８個分の敷地には、
";
            explainst += "「ハイウェイオアシスゾーン」「森のゾーン」「交流ゾーン」「草原と花のゾーン」の４つのエリアがあり、
";
            explainst += "季節の花や森の風景を楽しんだり、広大な草原で散歩、いろいろな遊具で遊ぶなど、
";
            explainst += "リフレッシュと癒しあふれる空間になっています。
";
            break;
    case 5: //淡路夢舞台
            explainst  = "ウェスティンホテルに隣接する、自然豊かなリゾート施設です。
";
            explainst += "世界各国の植物を集めた大温室「奇跡の星の植物館」をはじめ、
";
            explainst += "北側へ広大な敷地が広がっていて、展望台、野外劇場、レストランなどがあり、
";
            explainst += "家族連れやカップル、少人数から団体旅行まで人数を問わず楽しめるスポットです。
";
            break;
    case 6: //北淡震災記念公園
            explainst  = "過去の教訓を未来へ…、1995年に発生した阪神淡路大震災の記録を未来へ伝えるための施設です。
";
            explainst += "地震により現れた野島断層をそのまま保存しているため、地震の脅威をそのまま感じることができます。
";
            explainst += "当時の街並みを復元したものや、倒壊を免れた建物の壁の展示がみられます。
";
            explainst += "震度７の揺れを体験できる部屋もあり、日ごろからの備えの大切さを身をもって知ることができます。
";
            break;
    case 7: //五斗長垣内遺跡
            explainst = "弥生時代後期に存在した、国内最大規模の鉄器製造群落遺跡です。
";
            explainst += "約２３棟の鉄製造施設跡からなり、鉄製の斧をはじめ、矢じりや鉄片などが出土しています。
";
            explainst += "管理棟を抜けると、当時の住居が復元されていて、中に入ることもできます。
";
            explainst += "最上部の展望台までいくと、瀬戸内海を望む景色を楽しむことができます。
";
            break;
    case 8: //ウェルネスパーク五色
            explainst = "江戸時代後期の淡路島生まれの廻船商人、高田屋嘉兵衛の功績を紹介する資料館のほか、
";
            explainst += "公共の宿泊所、キャンプ場、温泉、テニスやフットサル用のドーム付きグラウンド、
";
            explainst += "レストランや体験教室もある複合施設です。中央の大きな芝生広場ではいろいろなイベントが催されていて、
";
            explainst += "春先には、芝生上空を横切るように大量の鯉のぼりが泳ぎます。
";
            break;
    case 9: //陸の港西淡
            explainst = "淡路島南部（南あわじ市）と神戸・大阪方面をつなぐ、パークアンドライド型駐車場です。
";
            explainst += "高速バスのチケット売り場、待合スペースに加えて、2018年4月にリニューアルによって、
";
            explainst += "飲食スペース、お土産ショップ、レンタサイクルサービスも開始しました。
";
            explainst += "更衣室や工具類も常備されていてサイクリストにも便利な施設になっています。
";
            break;
    case 10://門崎(鳴門海峡)
            explainst  = "淡路島の南端に位置する観光スポットがこの門崎（とさき）です。
";
            explainst += "淡路牛やタコ天ぷらなどをサンドしたあわじしまバーガーとはじめ、さまざまなグルメや、お土産ショッピングを楽しめます。
";
            explainst += "鳴門海峡大橋の付け根まで降りていくことができるので、鳴門渦潮の大迫力を肌で感じることもできます。
";
            explainst += "年末年始には、クリスマスツリーならぬタマネギツリーや、タマネギ門松も見られます。
";
            break;
    }
　  filename1 = "p" + ('00' + num).slice(-2) + "a.jpg";
    filename2 = "p" + ('00' + num).slice(-2) + "b.jpg";
    var str = "　
　" + explainst + "
";
    var txtArea = document.getElementById('placedata');
    txtArea.innerHTML = str;
}