Rails のフォームの取り扱い
Rails のフォームに自動入力をする
現在作成中のアプリケーションにつけたかった機能がやっと！実装完了。今回取り入れた機能は、Google map上にマーカーを立てるとマーカーの位置情報を
フォームに自動的に入力してくれるというもの。今回、参考にさせていただいたサイトはこちらです。本当にありがとうございます！！マップとフォームは同じページに設定、Google Maps APIのJavaScript APIとGeocode APIを使用しています。
今回は、導入したコードを少しだけ参考までに
//最初にフォームのコードから始めています//
<%= form_for(@fishmap) do |f| %>
<div class="field" id="map_add" type="text" value="">
<%= f.label :住所 %>
<%= f.text_field :address %>
</div>
<div class="field" id="latitude" type="text" value="">
<%= f.label :緯度 %>
<%= f.text_field :latitude %>
</div>
<div class="field" id="longitude" type="text" value="">
<%= f.label :経度 %>
<%= f.text_field :longitude %>
</div>
<div class="field">
<%= f.label :記事 %>
<%= f.text_area :mapcontent, placeholder: "一言" %>
</div>
<div class="actions">
<%= f.submit "投稿", class: "btn btn-primary" %>
</div>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png'%>
</span>
<% end %>
（中略）
//こっからGooglemapのコードが始まりますがまずは入力というボタンをつけています。//
<div class="col-md-8">
<h3>Google map</h3>
<p><button id="inputmap">入力</button></p>
<div id="target" style='width: 100%; height: 500px;'></div>
（中略）
//そして下記のコードがマップの位置情報を取得し入力ボタンを押すと最初のフォームの中に取得したそれぞれの位置情報が自動で入ります//
map.addListener('click', function(a) {
geocoder.geocode({
location: a.latLng
}, function(results, status) {
if (status == 'OK') {
new google.maps.Marker({
position: a.latLng,
map: map,
title: results[0].formatted_address,
animation: google.maps.Animation.DROP
});
var pos = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
document.getElementById("inputmap").onclick = function () {
$('#fishmap_latitude').val(pos.lat());
$('#fishmap_longitude').val(pos.lng());
$('#fishmap_address').val(results[0].formatted_address);
}
}
});
});
そもそもユーザーさんがマップ上に記事を投稿できる機能の実装で、ユーザーさんの操作を減らすために、住所、緯度、経度の項目はマーカーを立てることで取得、フォームに自動入力というようにしたかったんですが、だいぶ苦労しました。
しかし、このコードでGoogle map上に
①マーカーを立てる
②マップ上部の入力ボタンを押す
③フォームにマーカーの住所、緯度、経度情報が自動入力されます。
という機能を実装できました。ふーー！！
