geoLoc.js

// Usage example of Google Map API 
// markerData[86] = [{name:'04_神社',lat:33.593062,lng:130.410649,label:'4'},
//{name:'ジオ',lat:33.59473,lng:130.407761,label:'4ジオ',id:5218,deveui:'XXXXE6ED003000XX',time:'2018-03-19T07:02:29.895Z',distance:'325.676'},
//{name:'IXM-XXXXX',lat:33.589493,lng:130.424789,label:'XXD2XXXX',esp:''},
//{name:'IXM-XXXXX',lat:33.582928,lng:130.421661,label:'XXD2XXXX',esp:''},
//];
//
var flg = true;
var map;
var marker = [];
var infoWindow = [];
var tempMarkerData = [];
var markerCnt = 0;
var markerData = {};

var markerDataWorst = [ // マーカーを立てる場所名・緯度・経度
{name:'公園',lat:33.5820378,lng:130.4315979,label:'17'},
{name:'データ',lat:33.574932,lng:130.429031,label:'17_データ'}
];

//markerData['Tri-Best'] = markerDataBest;
//markerData['Tri-Worst'] = markerDataWorst;
var dfltData =  [
{name:'03_駐車場',lat:33.586037,lng:130.421972,label:'3'},
{name:'02_公園',lat:33.58871,lng:130.426448,label:'2'},
{name:'01_モス',lat:33.59053,lng:130.421056,label:'1'},

]

function initMap() {
    // 地図の作成

    var mapLatLng = new google.maps.LatLng({lat: 33.59053 ,lng:130.421056}); // 緯度経度のデータ作成
    map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
      center: mapLatLng, // 地図の中心を指定
      zoom: 14 // 地図のズームを指定
   });

   // 凡例
   setHanrei();
   setMaker();
}
function setHanrei() {
    var legend = document.getElementById('legend');
    var div = document.createElement('div');
    div.innerHTML = '<input type="text" id="record_loc" class="input" value="1"><button onclick="swicth_loc()">Next loc</button>';
    legend.appendChild(div);
    div = document.createElement('div');
    div.innerHTML = '<span id="distance">Distance:</span>';
    legend.appendChild(div);
    div = document.createElement('div');
    div.innerHTML = '<span id="time">Time+9h:</span>';
    legend.appendChild(div);
    
    div = document.createElement('div');
    div.innerHTML = '<button onclick="swicth_forwardDevEUI()"> > </button>';
    legend.appendChild(div);
    div = document.createElement('div');
    div.innerHTML = '<button onclick="swicth_backDevEUI()"> < </button>';
    legend.appendChild(div);
    div = document.createElement('div');
    div.innerHTML = '<span id="deveui">DevEUI:</span>';
    legend.appendChild(div);
    div = document.createElement('div');
    //div.innerHTML = '<input type="checkbox" value="000DB531127D356B" style="width:13px;"><span id="deveui">000DB531127D356B</span></input>';
    devList = ['000DB531127D356B','000DB5311477353D','000DB531137A3569','000DB531138A353F','4786E6ED00530043','4786E6ED00360046','4786E6ED003C001B','4776E6ED00300038','4786E6ED003C003C','4776E6ED00220048'];
    var str = '<form id="devForm">';
    for(var i = 0 ; i < devList.length ; i++){
        if(i !== devList.length -1 ){
            str += '<input type="radio" name="dev" value="' + devList[i];
            str += '" style="width:13px;" ><span class="deveui">' + devList[i];
            str += '</span><br/>';
        }else{
            str += '<input type="radio" name="dev" value="' + devList[i];
            str += '" style="width:13px;" checked="checked"><span class="deveui">' + devList[i];
            str += '</span><br/>';
        }
    }
    str += '</form>';
    div.innerHTML = str ;
    legend.appendChild(div);
    div = document.createElement('div');
    div.innerHTML = '<button onclick="swicth_dflt()">default</button>';
    legend.appendChild(div);
    div = document.createElement('div');
    div.innerHTML = '<input type="text" id="record_id" class="input"><button onclick="swicth_id()">id enter</button>';
    legend.appendChild(div);
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}

function setMaker(data = markerData[1]){
    var markerData = [];
    markerData = data ;
    var markerLoc, markerGeo
    var gwCnt = 0;
    var gwImage = {// マーカーの画像
          //url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
        url: './img/GW-IXM.jpg',
        // This marker is 20 pixels wide by 32 pixels high.
          //size: new google.maps.Size(20, 32),
        size: new google.maps.Size(50, 64),
          // The origin for this image is (0, 0).
        origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (0, 32).
        anchor: new google.maps.Point(20,30),
        fillOpacity: 0.5
    };
    // マーカー毎の処理
    for (var i = 0; i < markerData.length; i++) {
            markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
            marker[i] = new google.maps.Marker({ // マーカーの追加
                position: markerLatLng, // マーカーを立てる位置を指定
                map: map ,// マーカーを立てる地図を指定
                //title: markerData[i]['name'],
                zIndex: 50,
                //label: markerData[i]['label']
            });

            markerEvent(i); // マーカーにクリックイベントを追加
            //infoWindow[i].open(map, marker[i]);
            // GWかジオロケデータならmarkerの表示を変える
            if ( markerData[i]['name'].indexOf('IXM')　> -1 ) {
                marker[i].setOptions({ icon: gwImage, title: markerData[i]['label'],   });// gwImage
                gwCnt++;
                //if(markerData[i]['esp'] != ''){
                //   infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
                //       content: '<div class="sample"><span>ESP値:' + markerData[i]['esp'] + '</span></div>' // 吹き出しに表示する内容
                //    }).open(map, marker[i]);
                //}
            }else if(markerData[i]['name'].indexOf('ジオロケ') > -1){
                markerGeo = marker[i];
                marker[i].setOptions({
                    icon:{
                        path:google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
                        scale: 4,
                        strokeColor: "#0000ff",
                        fillColor: "#0000ff",                //塗り潰し色
                            fillOpacity: 0.5  
                        },
                    zIndex: 100
                })
                document.getElementById("record_id").value = markerData[i]['id']; 
                document.getElementById("deveui").innerHTML = 'DevEUI:<br/>' + markerData[i]['deveui'];   
                document.getElementById("time").innerHTML = 'Time+9h:<br/>' + markerData[i]['time'].replace(/2018-03-[0-9]{2}T/,"");
                console.log(markerData[i]['distance']);
                
            }else{//場所のデータ
                markerLoc = marker[i];
                marker[i].setOptions({label: markerData[i]['label']})
                document.getElementById("record_loc").value = markerData[i]['label'];
            }
    }
    var distance = google.maps.geometry.spherical.computeDistanceBetween(markerGeo.getPosition(), markerLoc.getPosition());
    document.getElementById("distance").innerHTML = 'Distance:<br/>' + distance.toFixed(1) + ' m';
    console.log(gwCnt);
}
function isSelectedDevEui(data){
    var element = document.getElementById( "devForm" ) ;
    var radioNodeList = element.dev ;
    var deveuiRadio = radioNodeList.value ;
    
    for (var i = 0; i < data.length; i++) {
        if(data[i]['name'].indexOf('ジオロケ') > -1){
            if(data[i]['deveui'].indexOf(deveuiRadio) > -1){
                return true ;    
            }
        }
    }
    return false ;

}
// マーカーにクリックイベントを追加
function markerEvent(i) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
      infoWindow[i].open(map, marker[i]); // 吹き出しの表示
  });
}
function swicth_forward(){
    clearMarker();
    if(markerCnt < Object.keys(markerData).length){ markerCnt++;    }
    setMaker(markerData[markerCnt]);
}
function swicth_forwardDevEUI(){
    clearMarker();
    if(markerCnt  !== Object.keys(markerData).length ){markerCnt++;}
    for(var i = markerCnt ; i < Object.keys(markerData).length; i++){
        if(isSelectedDevEui(markerData[i])){
            setMaker(markerData[i]);
            markerCnt = i;
            break;
        }
    }
}
function swicth_back(){
    clearMarker();
    if(markerCnt > 0){markerCnt--;}
    setMaker(markerData[markerCnt]);
}
function swicth_backDevEUI(){
    clearMarker();
    if(markerCnt > 0){markerCnt--;}
    for(var i = markerCnt ; i > -1; i--){
        if(isSelectedDevEui(markerData[i])){
            setMaker(markerData[i]);
            markerCnt = i;
            break;
        }
    }
}
function swicth_dflt(){
    clearMarker();
    setMaker(dfltData);   
}
function swicth_id(){
    clearMarker();
    var id = document.getElementById("record_id").value;
    for (var d in markerData) {
        for (var n = 0; n < markerData[d].length; n++) {
            if(markerData[d][n]['id'] == id){
                setMaker(markerData[d]);
                markerCnt = d;
                break;
            }
        }
        
    }
}
function swicth_loc(){
    var locs = [];
    clearMarker();
    var loc = document.getElementById("record_loc").value;
    for (var d in markerData) {
        for (var n = 0; n < markerData[d].length; n++) {
            if(markerData[d][n]['label'] == loc){
                locs.push( d);
                break;
            }
        }
    }
    setMaker(markerData[locs[0]]);
    markerCnt = locs[0];
}

function clearMarker(){
    for (var i = 0; i < marker.length; i++) {
        marker[i].setMap(null);
      }
    marker = [];
}
function showTri(markerData = markerDataBest){
    var triangleCoords = [
        {lat: markerData[0]['lat'], lng: markerData[0]['lng']},
        {lat: markerData[1]['lat'], lng: markerData[1]['lng']},
        {lat: markerData[2]['lat'], lng: markerData[2]['lng']},
    ];
    var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0.15
    });
    bermudaTriangle.setMap(map);
}