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

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

新規登録して質問してみよう
ただいま回答率
85.53%
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で作成されています。

Q&A

解決済

2回答

6282閲覧

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

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で作成されています。

0グッド

1クリップ

投稿2020/09/28 14:57

編集2020/10/12 00:46

前提

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

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

gemfile

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

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

実現したいこと

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

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

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

console

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

該当のソースコード

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

ruby

1 def create 2 @lodge = Lodging.new(lodge_params) 3 if @lodge.valid? 4 @lodge.save 5 redirect_to root_path 6 else 7 render :new 8 end 9 end 10 11 def show 12 @lodge = Lodging.find(params[:id]) 13 gon.lodge = @lodge 14 end

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

model

1geocoded_by :prefecture_city 2 beore_save :geocode

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

htmlerb

1 <div class="under"> 2 <div class="under-child1"> 3 <p class="child1-title">宿について</p> 4 <%= @lodge.description %> 5 </div> 6 7 <div class="under-child2"> 8 <div id="map"></div> 9 </div> 10 </div> 11 12 13 <script type="text/javascript"> 14 var map; 15 var marker; 16 var pin = { lat: gon.lodge.latitude, lng: gon.lodge.longitude }; 17 function initMap() { 18 geocoder = new google.maps.Geocoder() 19 var map = new google.maps.Map(document.getElementById('map'), { 20 zoom: 12, 21 center: pin 22 }); 23 24 25 var marker = new google.maps.Marker({ 26 position: pin, 27 map: map 28 }); 29 } 30 </script> 31 <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'

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

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

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

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

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

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

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

回答2

0

新規投稿ページから、geocoderをしてDBにgeocodeを保存するのではなく
google Geocoder APIを使用して
adressプロパティの値に、詳細ページに呼び出した住所情報を記述して、変数に代入することで、各詳細ページに地図情報を表示させることが出来ました!

show.html.erb

1<script> 2// callbsck関数を読み込む 3function googleMap() 4 'use strict'; 5// mapを描画する範囲の指定 6 var map = document.getElementById('map'); 7// geoocoderのインスタンスを生成 8 var geocoder = new google.maps.Geocoder(); 9 10// rubyのデータをadressプロパティの値に設定。地域を日本に設定。 11 geocoder.geocode({address: '<%= @lodge.prefecture_city%>', 12 region: 'jp'}, function(results, status){ 13 if (status === 'OK' && results[0]) { 14 new google.maps.Map(map, { 15 center: results[0].geometry.location, 16 zoom: 12 17 }); 18 } else { 19 alert('失敗しました。理由: ' + status); 20 return; 21 } 22 }); 23} 24</script>

投稿2020/10/10 01:13

kanako417

総合スコア1

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

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

0

ベストアンサー

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

-InvalidValueError:setCenter:有限座標のLatLngまたはLatLngLiteralではありません:プロパティ内lat:数値ではありません

  • InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

-InvalidValueError:setPosition:LatLngまたはLatLngLiteralではありません:プロパティlat:数値ではありません

geocodeで経度と緯度に変換して、

geocodeの処理はどの様になされていますか?

またAPIからの応答内容には緯度経度情報が付随されている事は確認済みなのでしょうか?
ジオコーディング
(エラー判定等行われていますか?)

投稿2020/10/06 10:30

kuma_kuma_

総合スコア2506

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

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

kanako417

2020/10/10 00:58

ご回答ありがとうございました! 方法を変えたら、出来ました!! 新規作成ページに記入した住所をgeocodeしてDBにgeocode情報を保存し(gem 'geocoder'使用)、それを詳細ページで表示させる。という方法ではなく、 Geocoder APIを使用し、 geocodeのadressプロパティの値に、rubyで呼び出した住所データをJavaScriptで読み込み、 OKであればgeocoderして、無事に地図を各詳細ページに表示させることが出来ました!
kanako417

2020/10/10 01:00

geocodeの処理に着目したところ、このように思い通りの実装にたどり着く頃が出来たので、 今回はkuma_kuma_さんをベストアンサーにさせていただきます! 御二方、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問