Google MAP API, GEOCODE APIを使用してルート検索、表示機能が実装できない

前提・実現したいこと

railsでGoogle MAPを表示し、経路の表示ができる画面を実装中です。
①スタート地点、終着地点のテーブルはなし

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

マップは表示されているが、検索ボタンを押すとコンソールにエラーが吐かれてしまい経路の表示ができない。

 js?key=[My_API_KEY]:70 Directions Service: This API project is not authorized to use this API.  For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

該当のソースコード

haml
1.map#map{style: "width: 530px; height: 400px;"}
2%input#origin{type: 'textbox', value: '福井駅(福井)'}
3%br
4%input#destination{type: 'textbox', value: '福井県福井市役所'}
5%br
6%input#searchBtn{type: 'button', value: '検索'}

javascript
1$(function(){
2  var directions; //ルートのインスタンス
3  var map;      //マップのインスタンス
4  var ds = google.maps.DirectionsStatus;//ルート結果のステータス
5  var directionsErr = new Array(); //ルート結果のエラーメッセージ
6  directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
7  directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
8  directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
9  directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
10  directionsErr[ds.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
11  directionsErr[ds.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
12  directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";
13
14  // Onload時処理
15  // ルートの生成
16  directions = new google.maps.DirectionsService();
17  // Google Mapで利用する初期設定用の変数
18  var mapOptions = {
19      zoom: 17,
20      mapTypeId: google.maps.MapTypeId.ROADMAP,
21      center: new google.maps.LatLng(36.062092, 136.223323)
22  };
23  // GoogleMapの生成
24  map = new google.maps.Map(document.getElementById("map"), mapOptions);
25
26  // [検索]ボタン処理
27  $('#searchBtn').click(function(searchRoute){
28    console.log('hoge')
29  // テキストボックスから検索の出発・到着を取得
30  var origin = document.getElementById("origin").value;
31  var destination = document.getElementById("destination").value;
32  // ルート検索を依頼する
33  directions.route(
34      { // ルート リクエスト
35        'origin'     : origin,     //出発地点
36        'destination': destination,//到着地点
37        'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩
38      },
39      function(results, status) { // ルート結果callback関数
40        if (status == ds.OK) {  // 結果がOK ??
41          // ポリライン(折れ線)を生成し、マップに表示
42          var poly = new google.maps.Polyline({
43            map: map,              //マップ
44            path: results.routes[0].overview_path,//ポリラインの座標の列
45            strokeWeight: 5,       //ストローク幅(ピクセル単位)
46            strokeColor: "#f01010",//16進数形式のストロークの色
47            strokeOpacity: 0.5     //ストロークの不透明度(0.0～1.0)
48          });
49          // 検索結果の中心設定
50          map.setCenter(results.routes[0].bounds.getCenter());
51        } else {
52            // 結果がOKではない場合
53            alert("ルート検索が失敗しました。理由: " + directionsErr[status]);
54        }
55      });
56    })
57});