クリックした場所の地名、緯度、経度を取得し自動的にFormへ自動入力したい

前提・実現したいこと

ポートフォリオとしてスポットの共有アプリを作成しています。
マップを表示し、クリックした地点を住所投稿フォームへ自動入力する機能を実装したいです。
現在geocoderを利用して、クリックすることでクリックした地点の住所をマップ上で表示することは成功しています。
何か助言いただければと思います。よろしくお願い致します。

該当のソースコード

ruby
1posts/_new.html.erb
2
3<aside class="col-md-5">
4  <div class="d-flex flex-column align-items-center mt-3 w-100">
5    <div class="col-xl-7 col-lg-8 col-md-10 col-sm-11 post-card">
6      <div class="card">
7        <div class="card-body">
8          <div class="form-group">
9            <label>レビュー場所（Google Mapで検索)</label>
10            <div class="search-form">
11              <input id="address" class="form-control" type="textbox" placeholder="スポットを入力">
12              <button type="button" class="search-button" value="検索" onclick="codeAddress()">
13              <i class="fas fa-search"></i>
14              </button>
15            </div>
16          </div>
17          <%= form_with model: @post, class: "upload-images p-0 border-0" do |f| %>
18          <div class="form-group">
19            <label>住所</label>
20            <div>
21              <%= f.fields_for :map, @post.build_map do |m| %>
22                <%= m.text_field :address, class: "form-control", placeholder: "住所", name: "post[map_attributes][address]" %>
23              <% end %>
24            </div>
25          <div class="form-group mb-3">
26            <div class="col-auto pr-0"></div>
27            <label>テキスト</label>
28            <div>
29              <%= f.text_field :caption, class: "form-control", placeholder: "コメントを入力する" %>
30            </div>
31          </div>
32          <div class="mb-3">
33            <%= f.fields_for :photos do |i| %>
34              <%= i.file_field :image %>
35            <% end %>
36          </div>
37            <%= f.submit "投稿する", class: "btn btn-primary" %>
38          <% end %>
39        </div>
40      </div>
41    </div>
42  </div>
43</aside>

ruby
1_map.html.erb
2
3<div id='map'></div>
4
5<style>
6#map {
7  height: 50vh;
8  width: 60vw;
9  margin: 0 auto;
10}
11</style>
12
13<script>
14  let map
15  let geocoder
16
17  function initMap(){
18    geocoder = new google.maps.Geocoder()
19    if(!navigator.geolocation) {
20      alert('Geolocation APIに対応していません');
21      return false;
22    }
23
24    navigator.geolocation.getCurrentPosition(function(position) {
25      latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
26
27      map = new google.maps.Map(document.getElementById('map'), {
28        center: latLng,
29        zoom: 12,
30      });
31
32      marker = new google.maps.Marker({
33        position:  latLng,
34        map: map
35      });
36
37    var geocoder = new google.maps.Geocoder();  
38    
39    map.addListener('click', function(e){
40      geocoder.geocode({location: e.latLng}, function(results, status){
41        if(status === 'OK' && results[0]) {
42          
43          var marker = new google.maps.Marker({
44            position: e.latLng,
45            map: map,
46            title: results[0].formatted_address,
47            animation: google.maps.Animation.DROP
48          });
49          
50          var infoWindow = new google.maps.InfoWindow({
51            content:  results[0].formatted_address,
52            pixelOffset: new google.maps.Size(0, 5)
53          });
54  
55          marker.addListener('click', function(){
56            infoWindow.open(map, marker);
57          });
58          
59          infoWindow.addListener('closeclick', function(){
60            marker.setMap(null);
61          });
62        }else if(status === 'ZERO_RESULTS') {
63          alert('不明なアドレスです： ' + status);
64          return;
65        }else{
66          alert('失敗しました： ' + status);
67          return;
68        }
69      });
70    });
71  }, function() {
72        alert('位置情報取得に失敗しました');
73      });
74  }
75
76  function codeAddress(){
77    let inputAddress = document.getElementById('address').value;
78
79    geocoder.geocode( { 'address': inputAddress}, function(results, status) {
80      if (status == 'OK') {
81        map.setCenter(results[0].geometry.location);
82        let marker = new google.maps.Marker({
83          map: map,
84          position: results[0].geometry.location
85        });
86      } else {
87          alert('該当する結果がありませんでした：' + status);
88      }
89    });   
90  }
91</script>

ruby
1models/map.rb
2
3class Map < ApplicationRecord
4  belongs_to :post
5
6  geocoded_by :address
7  after_validation :geocode, if: :address_changed?
8end

ruby
1db/migrate
2
3class CreateMaps < ActiveRecord::Migration[6.1]
4  def change
5    create_table :maps do |t|
6      t.string :address
7      t.float :latitude
8      t.float :longitude
9
10      t.timestamps
11    end
12  end
13end
14
15class AddColumnToMap < ActiveRecord::Migration[6.1]
16  def change
17    add_reference :maps, :post, null: false, foreign_key: true
18  end
19end
20
21class CreatePosts < ActiveRecord::Migration[6.1]
22  def change
23    create_table :posts do |t|
24      t.string :caption
25      t.references :user, foreign_key: true, null: false
26
27      t.timestamps
28    end
29  end
30end

ruby
1controllers/posts.controller.rb
2
3class PostsController < ApplicationController
4  before_action :authenticate_user!
5
6  def new
7  end
8
9  def create
10    @post = Post.new(post_params)
11    redirect_to root_path
12    if @post.save
13      flash[:notice] = "投稿が保存されました"
14    else
15      flash[:alert] = "投稿に失敗しました"
16    end
17  end
18
19 def index
20  @post.build_map
21  @posts = Post.limit(10).includes(:map, :photos, 
22  :user).order('created_at DESC')
23 end
24
25  def show
26    @post = Post.find_by(id: params[:id])
27  end
28
29  def destroy
30    @post = Post.find_by(id: params[:id])
31    if @post.user == current_user
32      flash[:notice] = "投稿が削除されました" if @post.destroy
33    else
34      flash[:alert] = "投稿の削除に失敗しました"
35    end
36    redirect_to root_path
37  end
38
39  private
40
41  def post_params
42    params.require(:post).permit(:caption, map_attributes: [:address, :latitude, :longitude], photos_attributes: [:image]).merge(user_id: current_user.id)
43  end
44
45  def set_post
46    @post = Post.find_by(id: params[:id])
47  end
48end

試したこと

郵便番号から自動入力等の記事は見つけることができたのですが、合致する内容の記事を発見することができませんでした。
お手数ですが、アドバイスをいただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

Rails 6.1.4.1
Mac OS
docker

Lhankor_Mhy

2021/10/28 07:22

e.latLng ではダメなのですか？

hinata_hakumai

2021/10/28 08:13

ご回答ありがとうございます。マップ上ではe.latLngでマーカーは設置できており、リバースジオコーディングで経度緯度を住所に変換できているのですが、住所投稿フォーム内に自動で入力させる方法がわかっていない状態です。住所検索フォームからの自動入力は let address = document.getElementById('address'); address.setAttribute("value", inputAddress); let hidden_address = document.getElementById('hidden_address'); hidden_address.setAttribute("value", inputAddress); で実装できたのですが、こちらを応用することで実装可能でしょうか？

Lhankor_Mhy

2021/10/28 08:22

たぶん、そんな感じだと思います。