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

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

ただいまの
回答率

88.93%

Google Map マーカーが設置できない(本番環境のみ)

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 238

ochon

score 0

前提・実現したいこと

本番環境にてGoogleMapに登録住所からマーカーを設置したい

発生している問題・エラーメッセージ

Ruby on Rails にて投稿アプリを作成中です。
Google Map APIを取得し、登録住所からマーカーを表示したいと思っています。
map表示及び住所から緯度経度取得するために、gmaps4rails、geocoder をgemに入れています。
ローカル環境では問題なく表示されるのですが、本番環境(Heroku)でマーカーが表示されません(地図は表示される)。
検証ツール(Chrome)を開くと以下のエラーが発生します。

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value


ローカルでは問題なくマーカーが表示されるのに、本番環境でエラーが発生するのは何故なのでしょうか?
確認・見直すべき箇所があればご教示願いますでしょうか。

よろしくお願いいたします。

該当のソースコード

ファイル名:application.html.haml
どのviewでもgooglemapを表示できるようにapplication.html.hamlに記載

!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Waiwai
    = csrf_meta_tags
    = csp_meta_tag
    -# = include_gon
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    %script{:src => "//maps.google.com/maps/api/js?key=#{Rails.application.credentials[:GOOGLE_MAP_KEY]}"}
    %script{:src => "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}
    -# %script{src:  "//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js", type:"text/javascript"}  
  %body

---以下省略---


<index.html.haml>
Bootstrap使用
googlemap表示のコードのみ記載

-#Google map-----------------------------------------------------------------
.container.d-flex.justify-content-center.mt-5
  %h1.display-5.title
    MAP & SPOT
  %h4.beer-icon.ml-1
    = icon("fas fa-map-marked-alt",class: "beer-icon")


%div{:style => "width: 100%;"}
  #map{:style => "width: 100%; height: 400px;"}

  :javascript
    handler = Gmaps.build('Google');
    handler.buildMap({ 
      provider: {mapTypeId: 'roadmap'},
      internal: {id: 'map'}
    }, 
      function(){
        markers = handler.addMarkers(#{raw @hash.to_json});
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
        handler.getMap().setCenter(new google.maps.LatLng(34.68639, 135.52));
        handler.getMap().setZoom(8);
      });


ファイル名:post.controller

class PostsController < ApplicationController

  before_action :authenticate_user!, except: [:index,:show]

  def index
    @posts = Post.includes(:user).page(params[:page]).per(8).order(created_at: :desc)
    @like = Like.new

    @hash = Gmaps4rails.build_markers(@posts) do |post, marker|
      marker.lat post.latitude
      marker.lng post.longitude
      marker.infowindow render_to_string(partial: "posts/infowindow", locals: { post: post })
    end

    if params[:tag_name]
      @posts = Post.tagged_with(params[:tag_name]).page(params[:page])
      @like = Like.new

      @hash = Gmaps4rails.build_markers(@posts) do |post, marker|
        marker.lat post.latitude
        marker.lng post.longitude
        marker.infowindow render_to_string(partial: "posts/infowindow", locals: { post: post })
      end
    end



    if params[:q]
      @q = Post.ransack(params[:q])
      @posts = @q.result(distinct: true).page(params[:page])
      @like = Like.new

      @hash = Gmaps4rails.build_markers(@posts) do |post, marker|
        marker.lat post.latitude
        marker.lng post.longitude
        marker.infowindow render_to_string(partial: "posts/infowindow", locals: { post: post })
      end
    end
  end

  def new
    @post = Post.new
    @images = @post.images.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to posts_url,notice: "Posted a 「#{@post.name}」!"

    else
      render :new
    end
  end

---省略---

  private

  def post_params
    params.require(:post).permit(:name,:review,:score,:link,:address,:latitude,:longitude,:tag_list,images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end
end


ファイル名:post.rb

class Post < ApplicationRecord

 belongs_to :user 
  has_many :comments, dependent: :destroy
  has_many :images ,dependent: :destroy
  accepts_nested_attributes_for :images, allow_destroy: true

  acts_as_taggable

  validates :name, :address, :score,:tag_list, :images,  presence: true
  has_many :likes, dependent: :destroy
  has_many :liked_users, through: :likes, source: :user

  geocoded_by :address
  after_validation :geocode

end

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

解決しました。
アプリケーションの制限方法に問題があったようです。
HTTPリファラーで設定していたのですが、サイトの指定方法に問題がありました。
とりあえず、「制限なし」でAPIが使用できたので様子みます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る