【Google Maps API】本番環境でGoogle Mapが正しく読み込まれなかった原因と解決法

本番環境でGoogle Mapを表示できない

このページではGoogleマップが正しく読み込まれませんでした。

結論

APIキーを config/credentials.yml.encファイルで管理する

（.envファイルでなく）

原因

本番環境にAPIキーを渡せていない

新しく取得したキー設定の誤りだと思ったら、キーの管理方法という基礎部分の誤りでした。。

経緯

1. Google Maps API 導入
2. ローカル環境でマップ表示できた
3. APIキーを.envファイルで管理していた
4. .envファイルは外部から見えぬよう、Gitの対象から外していた
5. AWSにデプロイ後、ドメイン取得、HTTPS化してアクセスすると、マップ表示できなくなった
6. 本番環境にAPIキーを渡せていないのかも？（仮説）
7. 本番環境からは.envファイルを参照できない！

本番環境にも、APIキーを隠して渡す

config.credentials.yml.encファイルにAPIキーを記述

ローカルのターミナル

EDITOR=vi rails credentials:edit    #vimでファイルを開く

config/credentials.yml.enc

google_map_api_key: xxxxxxxxxxxxxxxxxxxxxxxx     #APIキーを追記

ビューで、config/credentials.yml.encファイルの記述を読み取る

map.html.erb

<script src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.credentials.google_map_api_key %>&callback=initMap" async defer></script>

# <%= Rails.application.credentials.google_map_api_key %>
# これで「config.credentials.yml.enc」ファイルの「google_map_api_key」を取得できる

キーの読み取り方（記述の違い）

<%= Rails.application.credentials.google_map_api_key %>    #credentials.yml.encファイルからキー取得
<%= ENV['google_map_api_key'] %>                           #.envファイルからキー取得

Google Mapが表示されない時の確認事項

• 取得したAPIキーをhtml内に記述しているか
• 支払い情報を登録しているか
• 請求先アカウントを未設定の場合、マップが1日1回しか表示できないらしい
• 表示回数の制限「割り当て」が1回になっていないか
• 回数制限がかかっているとMapが表示エラーになる可能性がある
• 請求アカウントとプロジェクトがひも付いているか

参考

GoogleMapが表示されないエラーが出た時の対処法
Rails5.2から追加された credentials.yml.enc のキホン

さいごに

Google Maps API導入は比較的スムーズに設定できました。（ローカルで）
マップがうまく読み込まれない主な原因は、Google Cloud Platformでの設定が多いようですが、
APIキーを本番環境に渡せていないのは盲点でした。
キーやパスワードの管理方法について、セキュリティ面を見直すいい機会とはなりました。

間違っている点がありましたら、ご指摘いただけるとありがたいです。