Milkcocoa/GoogleAPI活用の勉強

<img src="https://qiita-image-store.s3.amazonaws.com/0/20635/49ab0ea7-96c2-4db8-706f-ccf38a03ad4a.png" alt="サンプル" width="450" height="auto">

GoogleAPI、Milkcocoa導入の練習。説明は以下に記載 
Milkcocoa、GoogleAPIの活用方法はとても簡単でした。
導入方法は後ほどまとめる。



```lang:GoogleAPI　　
Google Maps APIとは、Google社が提供する地図情報サービスであるGoogle Maps（グーグルマップ）の持つ機能を、インターネットを介して外部から利用するための手続きをまとめたAPI。Google Maps APIを利用することで、地図情報を活用したサービスを簡単に構築することができる。
```

```lang:Milkcocoa　　
IoTデバイス・スマートフォン・PC間で簡単にリアルタイムなデータのやり取りが出来るようになるクラウドプラットフォームです。
```


```html:HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map&Geolocation</title>
<style>

body{
    background-image: url("./hide.jpg");
}
    
#side{
    position: absolute;
    width: 800px;
    height: 500px;  
    }

#st{
    position: absolute;
    top: 500px;
    width: 800px;
    height: 500px;    
}
    
#map {
    position: absolute;
    width: 800px;
    height: 1000px;
}

#street {
    position: absolute;
    width: 800px;
    height: 1000px;
}

#style{
    position: absolute;
    width: 800px;
    height: 1000px;    
}

#btn{
    font-size:50px; 
    position: absolute;
    left:900px; 
    margin: 0 auto;
    width: 280px;
    height: 100px; 
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    background: #00aaff;
    box-shadow: 0 4px 0 #0088cc;
    cursor: pointer;
}

#btn:hover{
    opacity: 0.8;
}

#btn2{
    font-size:50px; 
    position: absolute;
    left:1200px; 
    margin: 0 auto;
    width: 280px;
    height: 100px; 
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    background: #00aaff;
    box-shadow: 0 4px 0 #0088cc;
    cursor: pointer;
}    

#btn2:hover{
    opacity: 0.8;
}
    
#btn3{
    font-size:50px; 
    position: absolute;
    top: 200px;
    left:1360px; 
    margin: 0 auto; 
    padding: 5px;
    color: #fff;
    border-radius: 5px;
    background: gray;
    box-shadow: 0 4px 0 white;
    cursor: pointer;
}

#btn3:hover{
    opacity: 0.8;
}       

#msg{
    position: absolute;
    top: 150px;
    left:900px; 
    width: 260px;
    height: 100px; 
    padding: 10px;
}
    
#board{
    position: absolute;
    top: 300px;
    left:900px; 
    width: 580px;    
    height: 700px; 
    padding: 0px;
    margin: 0px;
    border: 5px groove #fff;
    font-size: 20px;
    overflow-y: auto;
}  
</style>
</head>
<body>

<!-- Map -->
    <div id="side"></div>
    <div id="st"></div>
    <div id="map"></div>
    <div id="street"></div>
    <div><input type="button" id="btn" value="StyleA"></div>
    <div><input type="button" id="btn2" value="StyleB"></div>
    <textarea id="msg" cols="800" rows="100"></textarea>
    <div><input type="button" id="btn3" value="Send"><div>
    <div id="board"></div>
    <ul id="board"></ul>
<!-- Map -->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtuQY1zbICu5azvigON82y7LRRfqKaH3Q&callback=initMap
" async defer></script>
<script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>


<script>   
//result関数
function result(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
            
//GoogleAPI　Map      
$("#btn").on("click", function(){    
  var map = new google.maps.Map(document.getElementById('map'),{
    center: {lat: lat, lng: lon},
    zoom: 14
  });
});
    
//GoogleAPI　StreetView 
 $("#btn2").on("click", function(){       
  var pan = new google.maps.StreetViewPanorama(document.getElementById('street'),{
     position: {lat: lat, lng: lon},
     zoom: 14 
  });  
});           
} 
    
//位置情報を取得する処理 geolocation
function initMap(){        
  navigator.geolocation.watchPosition(result);  
}   
 

//Milkcocoa
$(function(){
    //データストアを作成（データを送受信するために必要）
    var milkcocoa = new MilkCocoa('teaio28h7fz.mlkcca.com'); 
    //データベースストア：オブジェクト生成
    var chatDataStore = milkcocoa.dataStore("chat");
    
    //送信処理（ボタンをクリック）
    $("#btn3").on("click",function(){
        
        var now   = new Date();
        var mo = now.getMonth()+1;
        var d  = now.getDate();
        var h  = now.getHours();
        var m  = now.getMinutes();
        var s  = now.getSeconds();
        
        var t = $("#msg").val(); //入力文字を取得
        var d = mo+"/"+d+"　"+h+"："+m;
        
        //milkcocoa:send送信
        chatDataStore.push({ text:t, dayTime:d },function(e){
            $("#msg").val(""); //送信後、空っぽにする
        });
    });
    
        //受信処理（send受信）
        chatDataStore.on("push",function(data){
            console.dir(data);
               $("#board").prepend("・" +data.value.text+ "（" +data.value.dayTime+ "）" + "<br>");　　　
        }); 
    
    
    //ソート変数　
    var history = milkcocoa.dataStore('chat').history();
    var i = 0;
    history.sort('desc'); //ASC昇順、DESC降順
    history.size(1); //表示の回数
    history.limit(20); //表示される数個
    
    
    //ソートロジック データ取得&表示処理
    history.on('data', function(a) {
          for(var i=0; i<a.length; i++){
            $("#board").append("・" +a[i].value.text+ "(" +a[i].value.dayTime+ ")" + "<br>");
          }
    });
    
    history.on('end', function() {
        console.log('end');
    });
    history.on('error', function(err) {
        console.error(err);
    });
    //実行処理
    history.run();   
});
    
</script>
</body>
</html>
```