質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

0回答

1154閲覧

google map APIに登録住所が表示されない

maxi

総合スコア0

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

0クリップ

投稿2021/07/26 16:11

前提・実現したいこと

現在、初心者なりに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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問