Google MAP APIでのエラーの改善

前提・実現したいこと

laravelを使って、webサイトを制作しております。
実現したいことはGeocoding を活用して地名や住所から座標(経度緯度)の取得をして、指定の住所にピンを指すです。

　Geocoding を使わない場合のmapの表示はできるのですが、Geocodingを使うと「alert('住所が正しくないか存在しません。');」が表示され検証画面では下記のエラーが出てこちらのエラーの対処が参考サイトなどをいくつか見たのですが改善できませんでした。

・実装にする際の参考サイト

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

Geocoding 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

該当のソースコード

js
1<!-- jqueryの読み込む -->
2        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
3        <!-- google map api -->
4        <script src="https://maps.googleapis.com/maps/api/js?key=自分のキー"
5        ></script>
6        <script src="https://maps.googleapis.com/maps/api/geocode/json?address=AIzaSyADy2Z_VYXNySO-uJSwOWRvs19LrJ3se9U"
7        ></script>
8        <script type="text/javascript">
9        var target = document.getElementById('map'); //マップを表示する要素を指定
10  var address = '東京都'; //住所を指定
11  var geocoder = new google.maps.Geocoder();  
12
13  geocoder.geocode({ address: address }, function(results, status){
14    if (status === 'OK' && results[0]){
15
16      console.log(results[0].geometry.location);
17
18       var map = new google.maps.Map(target, {  
19         center: results[0].geometry.location,
20         zoom: 18
21       });
22
23       var marker = new google.maps.Marker({
24         position: results[0].geometry.location,
25         map: map,
26         animation: google.maps.Animation.DROP
27       });
28
29    }else{ 
30      //住所が存在しない場合の処理
31      alert('住所が正しくないか存在しません。');
32      target.style.display='none';
33    }
34  });
35    </script>

・該当コードが格納されているgitのリンク

試したこと

同じような質問がテラテイルに既にあったので、APIの許可の確認
「Maps JavaScript API」「Geocoding API」の両方とも有効になっています。
https://teratail.com/questions/159154
https://developers.google.com/maps/documentation/javascript/get-api-key