Q&A
現在googleのAPIを使用し、MAPを表示→ピンを刺す→緯度経度を抽出→その座標をもとに近くの施設を検索する。
という流れを作っています。
考えとしては、ピンで刺した緯度経度が、form_withのtext_fieldに自動入力され検索ボタンを押すと
入力された緯度経度をもとにgoogle place APIで近くの施設が検索されるようにすればうまくいきそうだと思い
この流れで制作しています。
ピンから座標を得るのはこちらのサイトを参考としました
https://www.google-mapi.com/event-data-processing/geocoding/
コントローラー def list keyword = params[:search] keyword_lat = params[:search2] keyword_lng = params[:search3] @client = GooglePlaces::Client.new( ENV['GOOGLE_API_KEY'] ) end
HTML <%= form_with url: "place/list", method: :get do |form| %> <h2>gmap</h2> <div class="form-group"> <div class="row"> <div class="col-sm-3"> <%= form.label :lat, "緯度" %> <%= form.text_field :lat %> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-3"> <%= form.label :lng, "経度"%> <%= form.text_field :lng %> </div> <%= form.submit "登録",class:"col-md-2 btn btn-primary mx-3"%> </div> </div> <% end %>
javascript function initialize() { var Marker; var map; var latlng = new google.maps.LatLng(35.658704,139.745408); var opts = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map (document.getElementById("map_canvas"),opts); //地図クリックイベントの登録 google.maps.event.addListener(map, 'click', function(event) { if (Marker){Marker.setMap(null)}; Marker = new google.maps.Marker({ position: event.latLng, draggable: true, map: map }); infotable(Marker.getPosition().lat(), Marker.getPosition().lng(),map.getZoom()); geocode(); //マーカードラッグイベントの登録 google.maps.event.addListener(Marker,'dragend', function(event) { infotable(Marker.getPosition().lat(), Marker.getPosition().lng(),map.getZoom()); geocode(); }) //地図ズームチェンジイベントの登録 google.maps.event.addListener(map, 'zoom_changed', function(event) { infotable(Marker.getPosition().lat(), Marker.getPosition().lng(),map.getZoom()); }) }) //ジオコーディング function geocode(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'location': Marker.getPosition()}, function(results, status) { if (status == google.maps.GeocoderStatus.OK && results[0]){ document.getElementById('id_address').innerHTML = results[0].formatted_address.replace(/^日本, /, ''); }else{ document.getElementById('id_address').innerHTML = "Geocode 取得に失敗しました"; alert("Geocode 取得に失敗しました reason: " + status); } }); } //更新 function infotable(ido,keido,level){ document.getElementById("lat").value = ido; document.getElementById("lng").value = keido; } }
困っていることとして、マップ上にピンを刺すことでjsの
document.getElementById("lat").value = ido;
からHTMLの
<%= form.label :lat, "緯度" %>
に緯度が自動入力されるところまではできましたが、それをコントローラーの
keyword_lat = params[:search2]
に変数を代入したいのですが、どのようにしたら[:search2]に値を入れることができるのかわからないです。
通常<%= form.text_field :search2 %>などでkeyword_lat = params[:search2]に値がいくと思うのですが、
今回の場合どのようにしたら良いのでしょうか?
<%= form.text_field :search2,:lat %>
で行けるのかなと思っていたのですが、エラーでした。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/01/19 15:39