GoogleMapを表示させたい

##前提・実現したいこと
googleのMaps JavaScript APIを使用してGoogleMapが表示されるようにしたいです。

##発生している問題
Maps JavaScript APIを取得し、GoogleMapを表示させようとしたところ、以下のエラーメッセージがコンソールに出てきており、ページ内のマップにも「このページでは Google マップが正しく読み込まれませんでした。」というダイアログがでてきます。

js?key=○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○&callback=initMap:56 You have exceeded your request quota for this API.
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

URLを確認しましたが、GoogleCloudPlatformを新規に使い始め、カード情報なども正しく入力しており、APIに制限などもかけていません。
GoofleMapsPlatformAPICheckerで確認したところAPIは取得できているようです。

htmlに以下のコードを書きましたが、どこを修正すればエラーが出ずにGoogleMapが表示されるようになるか教えていただきたいです。

  <div id="map" style="width:620px; height:400px"></div>
  <script type="text/javascript">
  function initMap() {
    var opts = {
      zoom: 15,
      center: new google.maps.LatLng(35.32402,134.491207)
    };
    var map = new google.maps.Map(document.getElementById("map"), opts);
  }
  </script>

  <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=○○○○○○○○○○○○○○○○○○○○○○○○○○&callback=initMap">
      </script>

○○○○○○○○の部分はAPIです。

行動規範の内容に同意します

回答1件

ベストアンサー

こちらを参考にAPIキーを発行し、

HTML
1<div id="map" style="width:620px; height:400px"></div>
2<script type="text/javascript">
3  function initMap() {
4    var opts = {
5      zoom: 15,
6      center: new google.maps.LatLng(35.32402,134.491207)
7    };
8    var map = new google.maps.Map(document.getElementById("map"), opts);
9  }
10</script>
11<script async defer src="https://maps.googleapis.com/maps/api/js?key=○○○○○○○○○○○○○○○○○○○○○○○○○○&callback=initMap"></script>