Google Map Geocoding API を使った実装のエラーについて

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
rails6で住所を投稿し、その内容をDB（MySQL）に登録して、その内容を表示させる、ということを実装しようとしています。

Column	Type	Options
name	string	null: false
comment	text	null: false
address	integer	null: false
longitude	integer
latitude	integer

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

localhost:3000/maps/newのページから住所と場所の名前とコメントを投稿した際に、以下のエラーが発生しました。

Mysql2::Error: Field 'latitude' doesn't have a default value

ターミナル上では以下のメッセージが出ていたため、API通信がうまくいっていないことが原因で、addressからlongitudeとlatitudeの変換が行われておらず、latitudeが空ですよ、というエラーが出ていると推測しています。

Google API error: request denied (The provided API key is invalid.).

該当のソースコード

app/models/map.rb

class Map < ApplicationRecord
  geocoded_by :address
  after_validation :geocode, if: :address_changed?
  # has_many :messages

  with_options presence: true do
    validates :address
    validates :name
  end
end

app/views/maps/new.html.erb

<%= render "shared/header" %>
<h1>場所投稿フォーム</h1>

 <%= form_with model: @map, url:maps_path, local: true do |f| %>
    <p>
    <%= f.label :name %>
    <%= f.text_field :name, size: "50x1" %>
    <%= f.label :address %>
    <%= f.text_field :address, size: "50x1" %>
    <%= f.label :comment %>
    <%= f.text_field :comment, size: "50x1" %>
    </p>

    <%= f.submit "送信"%>
<% end %>

<%= render "shared/footer" %>

app/controllers/maps_controller.rb

class MapsController < ApplicationController
  def index
    @maps = Map.all
    @map = Map.new
  end

  def new
    @map = Map.new
  end


  def create
    @map = Map.new(map_params)
   
    if @map.save
      redirect_to action: :index
    else
      redirect_to action: :new
    end
  end

  def destroy
    map = Map.find(params[:id])
    map.destroy
    redirect_to action: :index
  end

  private
  def map_params
    params.require(:map).permit(:address, :name, :comment)
  end
end

config/initializers/geocoder.rb

Geocoder.configure(
  # Geocoding options
  # timeout: 3,                 # geocoding service timeout (secs)
  lookup: :google,              # name of geocoding service (symbol)
  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
  # language: :en,              # ISO-639 language code
  use_https: true,              # use HTTPS for lookup requests? (if supported)
  # http_proxy: nil,            # HTTP proxy server (user:pass@host:port)
  # https_proxy: nil,           # HTTPS proxy server (user:pass@host:port)
  api_key: ['GOOGLE_MAP_API_KEY'],
  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)
  # cache_prefix: 'geocoder:',  # prefix (string) to use for all cache keys

  # Exceptions that should not be rescued by default
  # (if you want to implement custom error handling);
  # supports SocketError and Timeout::Error
  # always_raise: [],

  # Calculation options
  # units: :mi,                 # :km for kilometers or :mi for miles
  # distances: :linear          # :spherical or :linear
)

app/views/shared/_map.html.erb

<input id="address" type="textbox" value="">
<input type="button" value="地図を検索" onclick="codeAddress()">
<div id="display"></div>

<div id='map'></div>



<script>
    let map

    const display = document.getElementById('display')

    // mapの表示関数 
    function initMap() {
        geocoder = new google.maps.Geocoder()

        // mapの初期位置, 縮尺を定義
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 35.57973,
                lng: 139.55869
            },
            zoom: 13,
        });

        // mapsテーブルにあるそれぞれのレコードをmap上に表示 
        <% @maps.each do |m| %>
            (function(){
            var contentString = "住所：<%= m.address %>"; 

            // マーカーを立てる
            var marker = new google.maps.Marker({
                position:{lat: <%= m.latitude %>, lng: <%= m.longitude %>},
                map: map,
                title: contentString
            });

            // 情報ウィンドウ(吹き出し)の定義
            // 投稿の詳細ページへのリンクも
            var infowindow = new google.maps.InfoWindow({
            position: {lat: <%= m.latitude %>, lng: <%= m.longitude %>},
            content: "<a href='<%= map_url(m.id) %>' target='_blank'><%= m.address %></a>"
            });

            // クリックしたときに情報ウィンドウを表示
            marker.addListener('click', function() {
            infowindow.open(map, marker);
            });

            })();
        <% end %>
    }

    let geocoder

    // 地図検索関数
    function codeAddress() {
        let inputAddress = document.getElementById('address').value;

        geocoder.geocode({
            'address': inputAddress
        }, function (results, status) {
            if (status == 'OK') {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

            display.textContent = "検索結果：" + results[ 0 ].geometry.location
            } else {
                alert('該当する結果がありませんでした：' + status);
            }
        });
    }
</script>

<script
    src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap"  
    async defer>
</script>

<h3>公園一覧</h3>
<% @maps.each do |t| %>

    <p>住   所 : <%= t.address %></p>
    <p>公園名称 : <%= t.name %></p>
    <p>コメント : <%= t.comment %></p>
    <p><%= link_to "削除する", map_path(t.id), method: :delete %></p>
    <hr>
<% end %>
<% if user_signed_in? %>
<%= link_to '新規投稿', '/maps/new', method: :GET %>
<% end %>

試したこと

• GoogleMapAPIキーの制限がGeocodingAPIとMapsJavascriptAPIが有効になっていることを確認。
• .envに間違いなくAPIキーが記述されていることを確認。
• gem 'geocoder'が記述してあり、bundle installしてrails sした
• コントローラー のcreateアクションのif @map.saveの手前でbinding pryして@mapの中身を確認（latitudeとlongitudeはnilだった）

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

こちらの記事を参考に実装を進めておりました。
https://qiita.com/MandoNarin/items/aa91ffae373a8cfc85d2
こちらの記事を参考に経度と緯度の精度の問題を疑いましたが、こちらは実施しても解決しませんでした。
https://qiita.com/roark/items/2fedc1ebac763e72d70b
ここにより詳細な情報を記載してください。