前提・実現したいこと
現在、初心者なりにPF制作を作成しております。
登録している住所にGoogle Mapを表示させるため下記サイトを参考に実装してみましたが、
地図自体は表示できているのですが、全て同一箇所(なぜかオーストラリア)しか表示されません。
参考記事ではaddressからgeocoderを使い、latitude(緯度),longitude(経度)を登録するようにしていますが、
consoleにて確認したところ、addressは登録させているのですが、latitude(緯度),longitude(経度)はnilになっています。
上記のことからmodelに記述した記載が問題かと考えたのですが、記載内容が同じで原因がわかりませんでした。
どなたか解決方法等ご教授いただけないでしょうか。
https://qiita.com/Sasaki_51660skbb/items/629a7f78e118e3bac1bc
発生している問題・エラーメッセージ
エラーメッセージは発生しておりません。
該当のソースコード
model
1class Facility < ApplicationRecord 2 # 緯度・軽度取得 3 geocoded_by :address 4 after_validation :geocode, if: :address_changed? 5 6end
table
1create_table "facilities", force: :cascade do |t| 2 t.integer "employee_id", null: false 3 t.string "name", null: false 4 t.string "postalcode", null: false 5 t.string "address", null: false 6 t.float "latitude" 7 t.float "longitude" 8 t.string "responsible_person", null: false 9 t.boolean "is_closed", default: false, null: false 10 t.integer "genre", null: false 11 t.datetime "created_at", null: false 12 t.datetime "updated_at", null: false 13 end
controller
1class FacilitiesController < ApplicationController 2 3 def show 4 @facility = Facility.find(params[:id]) 5 end 6 7 def new 8 @facility = Facility.new 9 end 10 11 def create 12 facility = Facility.new(facility_params) 13 facility.employee_id = current_employee.id 14 facility.genre = params[:facility][:genre].to_i 15 if facility.save 16 flash.notice = 'メッセージを送信しました。' 17 redirect_to facility_path(facility) 18 else 19 flash.now.alert = '入力に誤りがあります。' 20 render action: 'new' 21 end 22 end 23 24 def edit 25 @facility = Facility.find(params[:id]) 26 end 27 28 def update 29 @facility = Facility.find(params[:id]) 30 @facility.update(facility_params) 31 redirect_to facility_path(@facility) 32 end 33 34 private 35 def facility_params 36 params.require(:facility).permit(:id, :name, :postalcode, :address, :latitude, :longitude, :responsible_person) 37 end 38end
new
1div class="container-fluid px-5"> 2 <div class='row'> 3 <div class='col align-self-center'> 4 <h2 class="mt-3">施設新規登録</h2> 5 <%= form_with model:@facility, local:true do |f| %> 6 <table class="table table-striped table-bordered table-hover mt-3"> 7 <tr> 8 <th class="p-3">施設名</th> 9 <td><%= f.text_field :name, size: 80 %></td> 10 </tr> 11 <tr> 12 <th id="postcode" name="postalcode" class="p-3 "><%= f.label :postalcode, "郵便番号" %></th> 13 <td><%= f.text_field :postalcode, autocomplete: 'postalcode', size: 80 %></td> 14 </tr> 15 <tr> 16 <th id="address" name="address" class="p-3 "><%= f.label :address, "住所" %></th> 17 <td><%= f.text_field :address, autocomplete: 'address', size: 80 %></td> 18 </tr> 19 20 <tr> 21 <th class="p-3 ">施設ジャンル</label></th> 22 <td><%= f.select :genre, Facility.genres.map {|k,v| [I18n.t("enums.facility.genre.#{k}"), v]} %></td> 23 </tr> 24 <tr> 25 <th class="p-3 ">施設責任者</label></th> 26 <td><%= f.text_field :responsible_person, size: 80 %></td> 27 </tr> 28 </table> 29 <%= f.submit "作成完了" %> 30 <% end %> 31 </div> 32 </div> 33</div>
show
1<script type="text/javascript"> 2 function initMap() { 3// #latitude,longitudeから位置を特定 4 var test ={lat: <%= @facility.latitude %>, lng: <%= @facility.longitude %>}; 5 var map = new google.maps.Map(document.getElementById('map'), { 6 zoom: 15, 7 center: test 8 }); 9 var transitLayer = new google.maps.TransitLayer(); 10 transitLayer.setMap(map); 11 12 var contentString = '住所:<%= @facility.address %>'; 13 var infowindow = new google.maps.InfoWindow({ 14 content: contentString 15 }); 16 17// #Map上の指定した位置にピンを挿して表示する 18 var marker = new google.maps.Marker({ 19 position:test, 20 map: map, 21 title: contentString 22 }); 23 24 marker.addListener('click', function() { 25 infowindow.open(map, marker); 26 }); 27 } 28</script> 29 30<!--以下の記述の中にあるYOUR_API_KEYには取得したご自身のAPIキーを記述してください--> 31<script async defer 32 src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap"> 33</script> 34<!--表示するmapのcssです。ご自身でカスタマイズしてください。高さが設定されていないと表示されないことがあります。--> 35<style type="text/css"> 36 #map { height: 200px; 37 width: 70%;} 38</style> 39 40<!--#mapの表示--> 41<div id="map"></div> 42 43
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
ruby on Rails5
参考記事: https://qiita.com/Sasaki_51660skbb/items/629a7f78e118e3bac1bc
あなたの回答
tips
プレビュー