本番環境でGoogleMapが表示されない

Question

前提・実現したいこと

本番環境でGoogleMapを表示したい。

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

開発環境ではGoogleMapが表示され、経路の検索もできる。
本番環境ではfor deveropment purpose onlyが表示されてしまう。
Google platformのアカウントに支払い先の登録は済んでいます。
請求先アカウントのステータスも有効になっています。
このプロジェクトにリンクされている請求先アカウントで「請求先アカウント」は表示されています。

You are using this API without a key. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors

該当のソースコード

%script{src: "https://maps.google.com/maps/api/js?key=#{ENV['GOOGLE_MAP_API_KEY']}", charset: 'utf-8'}
= javascript_include_tag 'search'
.search
  .search__wrapper
    .search__wrapper__title
      %h1
        経路検索
      .search__wrapper__title__return
        =link_to root_path do
          Home
    .search__wrapper__contents
      .search__wrapper__contents__origin
        %p
          出発地
        %input#origin{type: 'textbox', value: '甲府駅(山梨)'}
      .search__wrapper__contents__destination
        %p
          目的地
        %input#destination{type: 'textbox', value: '山梨市駅（山梨）'}
      .search__wrapper__contents__btn
        %input#searchBtn{type: 'button', value: '検索'}
    .map#map{style: "width: 100%; height: 600px;"}
  

$(function(){
  var directions; //ルートのインスタンス
  var map;      //マップのインスタンス
  var ds = google.maps.DirectionsStatus;//ルート結果のステータス
  var directionsErr = new Array(); //ルート結果のエラーメッセージ
  directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
  directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
  directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
  directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
  directionsErr[ds.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
  directionsErr[ds.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
  directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";

  // Onload時処理
  // ルートの生成
  directions = new google.maps.DirectionsService();
  // Google Mapで利用する初期設定用の変数
  var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(35.666674, 138.568785)
  };
  // GoogleMapの生成
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  // [検索]ボタン処理
  $('#searchBtn').click(function(searchRoute){
  // テキストボックスから検索の出発・到着を取得
  var origin = document.getElementById("origin").value;
  var destination = document.getElementById("destination").value;
  // ルート検索を依頼する
  directions.route(
      { // ルート リクエスト
        'origin'     : origin,     //出発地点
        'destination': destination,//到着地点
        'travelMode' : google.maps.DirectionsTravelMode.DRIVING //ルートタイプ:車
      },
      function(results, status) { // ルート結果callback関数
        if (status == ds.OK) {  // 結果がOK ??
          // ポリライン(折れ線)を生成し、マップに表示
          var poly = new google.maps.Polyline({
            map: map,              //マップ
            path: results.routes[0].overview_path,//ポリラインの座標の列
            strokeWeight: 5,       //ストローク幅(ピクセル単位)
            strokeColor: "#0000EE",//16進数形式のストロークの色
            strokeOpacity: 0.5     //ストロークの不透明度(0.0～1.0)
          });
          // 検索結果の中心設定
          map.setCenter(results.routes[0].bounds.getCenter());
        } else {
            // 結果がOKではない場合
            alert("ルート検索が失敗しました。理由: " + directionsErr[status]);
        }
      });
    })
});

試したこと

・請求先アカウントの確認
・アプリケーションの制限を「なし」に変更
→変化なし

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

Rails 6.0.3.2
Herokuへデプロイ
ここにより詳細な情報を記載してください。

Comments

[Y.H.]

consoleに表示されている指示に従いURLを参照し
「トラブルシューティング」に記載されていることは全て実施済みと云うことで良いですか？

[tomoZQ]

はい。全て実施済みです。

Answer 1

Herokuの環境設定
ターミナルで

heroku config:set GOOGLE_MAP_API_KEY="[自分のAPI_KEY]"

とすることで解消しました。