2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【GoogleMapsAPI】Mapが表示されず空白になる問題【Rails】

Posted at

個人開発アプリを製作しており、備忘録かつ同じようなエラーが発生している方の参考になればと思い、記します。
#エラー内容
Railsで個人開発アプリを制作している。
店舗情報を投稿すると、住所(address)から緯度経度(latitude,longitude)を取得し、マップ表示する機能。

下記の写真のように、本来表示されるはずの位置に地図(Google Maps)が表示されず、空欄となる。数日前までは正常に表示できていた。

そして、数日前までに投稿した店舗情報については地図は表示されている。つまり、新規投稿すると住所情報から緯度経度を正しく取得できず、地図を表示することができないと言うことになる。
スクリーンショット 2020-10-30 9.50.37.png

#エラーに対するTRY
Google Cloud Platformを確認すると、Geocodeing APIで100%エラーになっていることが確認できた。
スクリーンショット 2020-10-30 10.07.52.png

Chromeによる検証ツール等を利用して調べるも、原因が不明。
上記Geocodingのエラーから、住所情報(address)から正しく緯度経度を取得できないと推測できる。

エラーを調べていくと、APIキーの設定ミスやJavaScriptの記載ミスなどが出てくるが、数日前までは普通に見ることができたし、前述の通り、過去の投稿についてはどれも地図が正しく表示されている。つまり、JavaScriptのタイポなどでは無いはず。

地図を表示させるためにどれも正しく設定しているはずで、数日前までは普通に表示されていたので、他に何か原因があると考えたが、数時間何を行っても直らず。GitHubで関係のありそうなファイルの過去と比べても何かを修正したところはない。

#解決法
StackOverFlow等、海外サイトを調べていくも決定打が見つからず。
途方に暮れていたところ、自分は環境構築でDockerを使用していることから、一度Dockerを落とし、再度ビルドすることにした。

local
$ docker-compose down
$ docker-compose build
$ docker-compose up -d
$ docker-compose run web rails db:create
$ docker-compose run web rails db:migrate

もう一度、テスト環境でローカルホストにアクセスすると、無事地図が表示されたことを確認。
住所を変更しても、ちゃんと変更した先の住所情報から緯度経度を取得して地図を表示していることを確認した。
正常動作を確認したため、本番環境にも反映させた(CircleCI導入済みのためgit push)。
無事本番でも正常動作を確認し、解決!

#学び
Docker再起動が時に有効打となることを学んだ。AWSデプロイ時もEC2の再起動でエラーが一気に解決したことがあるため、手を尽くす際には一度環境を再起動した方が良いと再確認できた。RailsでDockerを使用しGoogleMapsAPIを導入している方で、同じように空白表示される場合は、是非一度Dockerを再起動させてみてください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?