@besukosanposted at 2020-10-10

JSの変数をRailsに渡したい

Q&A

JavaScript Rails GoogleMapsAPI GeoCoding

やりたいこと

Rails+GoogleMapsについて。
GoogleMapsにてクリックした箇所にマーカーを置き、その座標を変数'latitude','longitude'に格納します。
それらの変数をRailsのフォーム用リンクに渡したいと考えています。

<%= link_to '座標を保持してフォームを作る', new_request_path, remote: true %>

問題点

このようにJSで定義した変数(latitude,longitude)をRailsの新規フォームに渡す方法が分からずにおります。

var marker = new google.maps.Marker();
//event.latLng.lat()でクリックしたところの緯度を取得
marker.setPosition(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
//marker設置
marker.setMap(map);

// イベントの引数evの、プロパティ.latLngが緯度経度。
document.getElementById('latitude').value = event.latLng.lat();
document.getElementById('longitude').value = event.latLng.lng();
var location = position.coords ;
latitude = location.latitude ;
longitude = location.longitude ;

試した事

link_toにてlatitude、longitudeカラム、それぞれにJSの変数latitude、longitudeの代入を試みますが上手くいかず、、

var contentString = '<%= link_to '選択', new_request_path, latitude: latitude, longitude: longitude, remote: true %>';
var request = new XMLHttpRequest();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);

2Answer

@getty104 posted at 2020-10-14

jsの値を初期値としてnew_request_pathに渡したい、という感じでしょうか？
その場合、リクエストにそれらの値を持たせてあげる必要がありそうです。
GETリクエストの場合、URLパラメータで渡してあげるしかないので、
<%= link_to '座標を保持してフォームを作る', new_request_path, remote: true %>のパスをjsで操作してURLパラメータを追加してあげるような処理を行えば渡せると思います。

0Like

Comments

@getty104
@besukosan
JavaScriptのコードのなかでlink_toなどのRailsのヘルパーメソッドを呼び出すことはできないので、
XMLHttpRequestなどを用いるのであれば、link_toを使わずに直接URLを文字列として生成し、リクエストを行えば良いと思います
@besukosan
Questioner
せっかくご回答頂いたのに遅くなり申し訳ございません。
結局モーダルの出し方を以下のようなコードに変更することで解決致しました。
（ですが、何故うまくいったのかはわかりません、、）

```JS
$('#requestModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var modal = $(this)
})
```

@besukosan posted at 2020-10-14

早々にご回答頂き有難うございます。

おっしゃる通り、jsでのURLパラメータの追加を模索しておりますが苦戦しております。
railsのlink_toにjsの変数を直接入れることは出来ないものでしょうか。。