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

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

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

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

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

Googleのgeocoding APIで詳細ページに地図表示

kanako417
kanako417

総合スコア1

Google API

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

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0評価

1クリップ

3286閲覧

投稿2020/09/28 14:57

編集2020/10/12 00:46

前提

現在、airbnbのような宿検索アプリの個人開発を制作中です。
そこで、airbnbのように投稿するごとに、宿それぞれの大体のエリアの表示を詳細ページに記載する実装を行っているのですが、
最初の投稿以降、他の詳細ページにはGoogle Mapが表示されません。
1件目の投稿以降、データベースに経度緯度の値も保存されません、、。

使用しているgemは以下です。(開発環境は補足情報に記載しています。)

gemfile

gem 'geocoder' =>今回の実装では使用しないので削除しました。 gem 'gmaps4rails' gem 'gon' gem 'dotenv-rails'

使用している、APIは、maps javascript APIと Geocoding APIの二つです。

実現したいこと

以下airbnbの詳細ページのように、宿を投稿するごとにそれぞれの大体のエリア表示をさせたいです。
イメージ説明

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

開発環境のconsoleを確認したところ、以下のようなエラーが表示されています。
さらに、投稿時にDBに経度・緯度のカラムをlatitude, longitudeとして
migrateさせたのですが、1回目以降はカラムに経度緯度共に、nullになってしまっています。

console

- InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number - InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

該当のソースコード

以下、コントローラ一部です。

ruby

def create @lodge = Lodging.new(lodge_params) if @lodge.valid? @lodge.save redirect_to root_path else render :new end end def show @lodge = Lodging.find(params[:id]) gon.lodge = @lodge end

google map API・gem 'geocoder'・googleのgeocoder APIを使用して
投稿ページに都道府県と市区町村までを入力させ、:prefecture_cityとしています。
railsのコールバックである、before_saveを利用して、登録と更新のどちらの場合にも同じ処理を行えるように記述を変更しました。

model

geocoded_by :prefecture_city beore_save :geocode

上記の記述でnew.html.erbファイルに:prefecture_cityカラムを入力した後に
geocodeで経度と緯度に変換して、詳細ページで以下のように表示させる記述をしています。

htmlerb

<div class="under"> <div class="under-child1"> <p class="child1-title">宿について</p> <%= @lodge.description %> </div> <div class="under-child2"> <div id="map"></div> </div> </div> <script type="text/javascript"> var map; var marker; var pin = { lat: gon.lodge.latitude, lng: gon.lodge.longitude }; function initMap() { geocoder = new google.maps.Geocoder() var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: pin }); var marker = new google.maps.Marker({ position: pin, map: map }); } </script> <script defer src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAP_KEY']%>&callback=initMap"></script>

試したこと

  • API keyを更新して、環境変数に新たに設定。

API KEYも環境変数に入れて、rails cで環境変数を確認したところ、きちんとAPI keyが呼び出されます。

  • HTTPリファラーを制限。

localhost:3000/*
本番環境のリファラーも追加することを忘れずに!

変更点・改善点

・geocoder APIを新たに利用。
・認証情報のAPIの制限をgeocoding APIと Maps Javascript APIのみに制限。
・gonを使用して、ビューファイルで経度緯度を読み込めるように、controllerとビューのJS内の記述を変更。

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

gem 'rails', '~> 6.0.0'
gem 'mysql2', '>= 0.5.3'

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy

2020/09/29 00:41

Railsタグをお使いになられては?
kanako417

2020/09/29 03:43

ご回答ありがとうございます!! <script>タグ内のpinのRailsの部分にシングルクォーテーションを記述しました! すると、投稿したconsoleのエラーメッセージは解消したのですが、 今度は投稿時にDBへ経度緯度が保存されておらず、 consoleに InValidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number InValidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number とされてしまいます。 config/initializers/geocoder.rb内に、 lookup: :google,と記述はしているのですが。 アドバイスいただければと思います、、。
Lhankor_Mhy

2020/09/29 04:12

いえ、質問にRailsタグがないので、この状態だとRubyが書ける回答者の目に留まらないんじゃないか、ということが言いたいのです。
kanako417

2020/09/29 05:29

なるほど!ありがとうございます!修正させていただきました!^ ^

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Google API

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

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。