緯度・経度が表示されない。

前提・実現したいこと

緯度・経度が写らない。
Geocodeをgemに書いてbundle installしているのに…

発生している問題

Noodle.rbというモデルに記述しております。

Noodle.rb↓

class Noodle < ApplicationRecord

  belongs_to :user

  has_many :comments, dependent: :destroy

  mount_uploader :image, ImageUploader

  geocoded_by :address←
  after_validation :geocode←

  validates :shop_name, presence: true
  validates :noodle_name, presence: true
  validates :genre, presence: true
  validates :price, presence: true
  validates :address, presence: true
  validates :yummy, presence: true
  validates :instagram, presence: true
  validates :girl, presence: true
  validates :man, presence: true
  validates :famous, presence: true

end

投稿一覧のviewはこのようになっております。↓

<div class="noodles-container">
  <% @noodles.each do |t| %>
    <div class="noodle">
          <div class="main-container">
            <span>
            <h2>Shop name</h2>
            <h3><%= t.shop_name %></h3>
            </span>
            <div class="main-box">
              <div class="top-container">
                <%= image_tag t.image_url, size: "400x400" if t.image? %>
              </div>
              <div class="down-container">
                <div class="right-container">
                  <b>Ramen name</b>
                  <%= t.noodle_name %>
                  <b>Genre</b>
                  <%= t.genre %>
                  <b>Price</b>
                  <%= t.price %>
                  <b>Address</b>
                  <%= t.address %>
                  <b>Latitude</b>
                  <%= t.latitude %>
                  <b>Longitude</b>
                  <%= t.longitude %>
                </div>
                <div class="left-container">
                  <h1>Evaluation List!!</h1>
                  <h2>Delicious!
                    <span class="star-rating">
                      <span class="star-rating-front" style="width: <%= getPercent(t.yummy) %>%;">★★★★★</span>
                      <span class="star-rating-back">★★★★★</span>
                    </span> 
                  </h2>
                  <h2>Instagrammable! 
                    <span class="star-rating">
                      <span class="star-rating-front" style="width: <%= getPercent(t.instagram) %>%;">★★★★★</span>
                    <span class="star-rating-back">★★★★★</span>
                    </span>
                  </h2>
                  <h2>Easy of entry for women!
                    <span class="star-rating">
                      <span class="star-rating-front" style="width: <%= getPercent(t.girl) %>%;">★★★★★</span>
                      <span class="star-rating-back">★★★★★</span>
                    </span>
                  </h2>
                  <h2>Greasy!
                    <span class="star-rating">
                      <span class="star-rating-front" style="width: <%= getPercent(t.man) %>%;">★★★★★</span>
                      <span class="star-rating-back">★★★★★</span>
                    </span>
                  </h2>
                  <h2>Little-known post!
                    <span class="star-rating">
                      <span class="star-rating-front" style="width: <%= getPercent(t.girl) %>%;">★★★★★</span>
                      <span class="star-rating-back">★★★★★</span>
                    </span>
                  </h2>
                </div>
              </div>
            <div class="index-link">
              <div class="fb-share-button" data-href="http://localhost:3000/noodles" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A3000%2Fnoodles&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a></div>
              <%= link_to "Details☞", noodle_path(t.id) %>
            </div>
          </div>
    </div>
  <% end %>
</div>

現在のjsコード

<div id='map'></div>

<script>
  let map

    function initMap(){
      geocoder = new google.maps.Geocoder()

      map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.68123620000001, lng:139.7671248},
          zoom: 12,
      });


      <% @noodles.each do |t| %>
          (function(){
          var contentString = "住所：<%= t.address %>"; 

          var marker = new google.maps.Marker({
              position:{lat: <%= t.latitude %>, lng: <%= t.longitude %>},
              map: map,
              title: contentString
          });

          })();
      <% end %>
      }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=｛｝&callback=initMap" async defer></script>

投稿した後のjsコード

<script>
  let map

    function initMap(){
      geocoder = new google.maps.Geocoder()

      map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.68123620000001, lng:139.7671248},
          zoom: 12,
      });


          (function(){
          var contentString = "住所：東京都葛飾区青戸３丁目３３−１６"; 

          var marker = new google.maps.Marker({
              position:{lat: , lng: },
              map: map,
              title: contentString
          });

          })();
          (function(){
          var contentString = "住所：葛飾区"; 

          var marker = new google.maps.Marker({
              position:{lat: , lng: },
              map: map,
              title: contentString
          });

          })();
      }

現在のコンソールの状態

参考記事

【Rails6 / Google Map API】住所を投稿してマップに複数マーカーを立てる

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

windows 10 Home
rails 2.6.6

退会済みユーザー

2021/03/15 11:04

住所→緯度経度変換しているんですか？その箇所のコードも掲載してください。

scivola

2021/03/15 11:18

「参考記事」の「geocoder用のコンフィグファイルを作成」の節は実行しましたか？

takenoko011412

2021/03/15 11:19

はい。そのような仕様になっていると思われます。

scivola

2021/03/15 11:27

同じようにしたのでしたら，API は Google のを使ったのですか？でしたら，API key が必要ですが，正しく取得できていますか？

takenoko011412

2021/03/15 12:16

正しく取得したのですが、、、修正して載せるので現在のコンソールの部分を見ていただけると幸いです…

scivola

2021/03/15 13:13

えっ？　geocoder gem を使っているのに，JavaScript で Geocoder を使っているのですか？　どういうことでしょう？ところで，ブラウザーのコンソールを見ると JavaScript で SyntaxError が出てますね。当面の問題はここでしょう。

takenoko011412

2021/03/16 15:48

記事の意味が深く理解できなかったもので… わかりました。

scivola

2021/03/16 15:50

解決した，ということでしょうか？

takenoko011412

2021/03/18 04:37

解決はできていないです… 誤解を生む発言をしてしまい申し訳ないです。

scivola

2021/03/18 11:10

「わかりました」で解決したと勘違いしたのは私がおかしいのです。どうか萎縮しないでくださいね。さて，上にも書きましたが，「現在のコンソールの状態」の画面を見ると，JavaScript でエラーが出ています。まずはここを解決すべきでしょう。 Uncaught SyntaxError: Unexpected token ',' とあるので，「ここにカンマがあるのはおかしいやん」と言っているようです。 needles.js というファイルがあるんでしょうかね。それの 77 行目？そこのあたりはどうでしょうか。見ても SyntaxError の原因が分からないようでしたら，その JavaScript コードを貼ってください。

takenoko011412

2021/03/18 12:52

そのjavascriptのコードは記載してあります！言われているところは、 position:{lat: <%= t.latitude %>, lng: <%= t.longitude %>},ここの部分です！

scivola

2021/03/18 12:59

それはテンプレートなので，実際に JavaScript のエラーが出ているのは，そのコードから生成された HTML の中ってことですかね。でしたらまさにエラーが出ているところの HTML を貼ってもらえますか（テンプレートじゃなくて，ブラウザーの HTML ソースからのコピペで）。

takenoko011412

2021/03/18 13:09

このようになっています。空っぽの状態です。

行動規範の内容に同意します

回答1件

問題の切り分けをしていきましょう。
どうもビューやコントローラーの問題ではなくて，そもそもモデルの geocode がうまく働いていないのではないか，という印象です。
そのことを確かめます。
まず，

terminal
1$ rails g model position address latitude:float longitude:float
2$ rails db:migrate

とでもやってテスト用のモデル Position を作り（名前は何でも），

ruby
1class Position <  ApplicationRecord
2  geocoded_by :address
3end

のように記述します。
（作成中のアプリに余計なものを入れたくないかもしれませんが，モデルを作るだけなので消すのは簡単です）

そして，Rails コンソールで

ruby
1pos = Position.new address: "Tokyo"

のようにしてモデルオブジェクトを作ります。
そして，

ruby
1pos.geocode

とやったら，latitude と longitude に値が入るはず。
その場合，返り値は緯度／経度の配列なので，コンソールにそれが表示されます。

もし，値が入らず

Geocoding API not responding fast enough (use Geocoder.configure(:timeout => ...) to set limit).

などと表示されたらタイムアウトの設定が短すぎるので長くしてやります。
API キーの問題なのであれば

Google API error: request denied (The provided API key is invalid.).

などと表示されるはずです。

投稿2021/03/20 01:12

scivola

総合スコア2108

takenoko011412

2021/03/20 13:29

表示されたのですが、これは正常に動いているということなのでしょうか。

scivola

2021/03/21 02:31

あ，それで緯度／経度の値が表示されたのですね？あと address に「東京都葛飾区青戸３丁目３３−１６」みたいなのを入れてもやはり表示されますか？

takenoko011412

2021/03/22 04:03

""" Traceback (most recent call last): SyntaxError ((irb):1: invalid multibyte char (Windows-31J)) (irb):1: invalid multibyte char (Windows-31J) """ このように出ました！

scivola

2021/03/22 06:36

あー，それはコンソール上で直に日本語（というかマルチバイト文字）を打ったときに起こりがちな問題ですね。そっちの解決を図っていると遠回りなので，とりあえずファイルから持ってきましょう。 Rails アプリのルートに tmp.txt とでもいったファイルを置いて，東京都葛飾区青戸３丁目３３−１６を UTF-8 で書いて，Rails コンソール上で Rails.root.join("tmp.txt").read(encoding: "UTF-8").chomp とでもやれば，上のようなエラーが出ずに日本語文字列が得られるので，それをつかってください。

takenoko011412

2021/03/22 14:54

それをどのように使えばよろしいのでしょうか…

scivola

2021/03/22 21:12

address = Rails.root.join("tmp.txt").read(encoding: "UTF-8").chomp pos = Position.new address: address pos.geocode みたいな感じで。

行動規範の内容に同意します