Rails

Rails 位置情報の取得、テーブルから近い順に羅列

ソースコード

<% if current_member && !@member == current_member %>
    var button = document.getElementById("practice-oneclick");
    // 現在地を取得する関数
    button.onclick = function () {
        //相互フォローなら
        <% if mutually_follow?(@member.id) %>

        // Geolocationが使用可能かチェック
        var dfd = $.Deferred();
        if (!window.navigator.geolocation) dfd.reject();

        // 現在地の取得
        window.navigator.geolocation.getCurrentPosition(
            // Success
            function (position) {
              alert('現在地から近いコートが複数個、候補として出ますので該当のテニスコートを確認の上、決定ボタンをクリックしてください')
                dfd.resolve(position);
                console.log(position.coords.latitude);
                console.log("おけ");
                var params = getParameter();
                params['latitude'] = position.coords.latitude;
                params['longitude'] = position.coords.longitude;
                var url = location.pathname.split('/');
                params['id'] = url[2];
                window.location.href = setParameter(params);
            },
            // Error
            function (error) {
                alert('ご使用中のブラウザは現在地検索に対応されておりません。')
                console.log("だめ");
                dfd.reject();
            },
            // Options
            {
                enableHighAccuracy: true, //位置情報の精度を高く
                timeout: 10000, //10秒でタイムアウト
                maximumAge: 600000 //10分間有効
            }
        );
        return dfd.promise();
        <% else %>
          var error = document.getElementById('error');
          error.innerHTML = "この機能を利用するには相互フォローしている必要があります。";
          error.className = "error active";
          $('#practice-oneclick').addClass('disable');
          setTimeout(function(){
              error.innerHTML = "";
              error.className = "error";
              console.log(button);
          }, 3000);
        <% end %>
    };
<% end %>

参考

http://webdesign-dackel.com/2015/01/18/google-maps-api/

https://qiita.com/Ingward/items/6ad7702dd313484f2b1c

https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation

SSL環境でないと動作しない