【Rails】form_for内の入力欄に、GoogleMap(API)上でクリックした位置の座標を自動入力する

#実装したい機能
・前提として、Railsアプリで、ユーザに、地図（GoogleMap）上の場所を登録させたい
・そこで、form_forとGoogleMapsAPI(JS)を用いる
・クリックしたGoogleMap上の位置の座標を「自動で」form_for内の所定の位置に入力させたい

#現状
・JavaScriptの知識があまりない状態です
・モデル等に現時点で問題はありません
・こちらのページ様を参考にさせて頂いて、座標は取得できています。
・上記リンク先のコードによって返された座標を「入力欄にコピペして下さい」、とするのは最終手段

new.html.erb
　上記リンク先のJSのコード

<div id="map" style="height:560px"></div>
中略

new.html.erbのform_for内

            <div id="show_lng" class="form-group">
              <%= f.label :longitude, '経度' %>
              <%= f.text_field :longitude, class: 'form-control' %>
            </div>

上記コードとした所
・newを表示して何もしていない段階では、経度の入力欄が表示されている
・マップ上をクリックすると、経度入力欄が消失し、経度入力欄の場所に平文で経度が表示される
・その状態でsubmitしてもlongitudeはnilとなってしまう

#試したこと

            <div class="form-group">
              <%= f.label :longitude, '経度' %>
              <%= f.text_field :longitude, id: "show_lng", class: 'form-control' %>
            </div>

としましたが、この場合、入力欄には何も起こらず、自動入力されることもありません。

何かアドバイスをいただければ幸いです。

#環境
Ruby 2.4
Rails 5.2
Bootstrap 4.1.3
Cloud9

行動規範の内容に同意します

回答1件

ベストアンサー

innerHtmlの理解が違っています。innerHtmlはDOMの中にHTMLを書き込むメソッドですから、本来inputコントロールがあった部分を取得した経度（平文）で置き換えてしまっている状態です。

「試したこと」に記載されているコードの方が正しいと思いますが、それで何も入力されないのであれば
・同じIDのDOMが複数存在していたりしないか
・何かエラーを吐いていたりしないか
・innerTextで置き換えた場合どう動くか
などチェックしてみてください。

投稿2018/09/18 01:38

perpouh

総合スコア299

yamayama-ya-ma

2018/09/19 10:46

どうもありがとうございます。 DOMの重複と当該部分関係のエラーは無いようだったので innerText、innerHTML、両方共試しましたが、いずれも以下の状態になります。試したこと、にあるコードの部分を、chromeのデベロッパーツールで確認するとマップをクリックしていない状態では <input id="show_lng" class="form-control" type="text" name="place[longitude]"> マップをクリックすると <input id="show_lng" class="form-control" type="text" name="place[longitude]">140.123456</input> のような形になりました。このままsubmitしてもlongitude等はnilとなっており、エラーになります。参考になりました。