【Rails,JavaScript】現在地を取得、保存し、そのまま画面遷移する

Railsで現在地を取得、保存し、そのまま画面遷移させたい。

現在地の取得にはjavascriptのgetCurrentPositionを使う。

Geolocation.getCurrentPosition() - Web API | MDN

おおまなかな流れ

①「現在地を取得する」ボタンを設置
②JavaScriptで現在地を取得し、railsのアクションへajaxで送信する
③保存する
④成功後、window.location.href = 'url';でページ遷移させる。

①「現在地を取得する」ボタンの設置

<button type="button" class="get-current-position-btn">現在地を取得する</button>

type="button"で設定しておく。

②getCurrentPositionで現在地を取得し、railsのアクションへajaxで送信する

 // 現在地の取得と送信
  
 // 成功時の処理 
 function success(pos){
     const lat = pos.coords.latitude;
     const lng = pos.coords.longitude;
     $.ajax({
       url: "保存する処理を書いたアクションのurl",
       type: "GET",
       data: {
         latitude: lat,
         longitude: lng
       },
       success: function(data) {
         alert("現在地を取得しました");
         window.location.href = '遷移させたい先のurl';　// 現在地取得後、ここで飛ばす
       },
       error: function(data) {
         alert("現在地を取得できませんでした");
       }
     });
 }
 // 失敗時の処理 
 function fail(pos){
   alert('位置情報の取得に失敗しました。');
 }
 
 $(function(){
   $('.get-current-position-btn').click(function(){
   const currentPosition = navigator.geolocation.getCurrentPosition(success,fail);
   });
 });

const lat = pos.coords.latitude;
const lng = pos.coords.longitude;

↑で緯度、経度を定義する。

その後ajaxで、保存する処理を書いたアクションへ飛ばす。

 $.ajax({
   url: "保存する処理を書いたアクションのurl",
   type: "GET",
   data: {
     latitude: lat,
     longitude: lng
   },
   success: function(data) {
    成功時の処理
   },
   error: function(data) {
    失敗時の処理
   }
 });

③保存する

# 現在地の保存
 def save_current_location
   params[:latitude]とparams[:longitude]を保存する処理
 end

②のdataで、latitudeと、longitudeを設定したので、
params[:latitude]、params[:longitude]で飛んできた値を操作できるようになる。

④成功後、window.location.href = '遷移先のurl';でページ遷移させる

success: function(data) {
 alert("現在地を取得しました");
 window.location.href = '遷移先のurl';
},

ここで遷移させる。