デプロイ後の本番環境でGoogleMapを表示させたい

Question

前提・実現したいこと

現在、クチコミサイトのアプリケーションを作成しています。
そのなかでGoogleMapsAPIを使ってサイト内にMapの表示をしたいと考えています。
Geocoding APIとMaps JavaScript APIを使いローカル環境では店舗の詳細ページに飛べば店舗に合わせた地図が表示されるようになっています。

しかし、本番環境だと
「このページでは Google マップが正しく読み込まれませんでした。」
と表示されうまくいきません。

原因はアプリケーションの制限をIPアドレスからHTTPリファラーへ変更したためだと考えています。

どなたか解決法をご教授いただけますと助かります。

ローカル、本番環境の設定

ローカル
アプリケーションの制限：IPアドレス

本番環境
アプリケーションの制限:HTTPリファラー
「https://www.example.com」
「https://www.example.com/*」
上記２URLの形式で「新しいアイテム」欄へ入力してあります。

Answer 1

「アプリケーションの制限：なし」にしても同様のエラーが出ていたので原因を探したところ、　　
heroku上にAPIキーをsetしていないことが主な原因でした。

ターミナル内で下記コードを実行しheroku　configにAPIキーをセットします。

heroku config:set SECRET_KEY=**********************
```※実際のキーを*に置き換えています。

その後、「アプリケーション制限:なし」で本番環境を確認したところ、無事Mapが表示されました。