GoogleMapAPI　表示範囲外の操作で動いてしまう

前提・実現したいこと

位置情報と画像を投稿できるアプリを作っています。
ポストをeachして一覧を表示したいです。

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

bootstrap4のcardの中にpostの内容を反映しています。
操作してみると、見えてはいませんがカードの外まで地図がはみ出ていることが分かりました。
本文をクリックすると投稿詳細ページに飛ぶようリンクさせていますが、
見えないマップが被っているためリンクは動かず、マップの表示位置が移動するなど、想定外の動きをしてしまいます。

※マップ部分がグレーになって表示されていないカードがありますが、画面サイズを変えると表示されるようになります。
※スマホ表示で各ポストが縦一列に並ぶと、地図も問題なく表示され、はみ出た部分もなくなり、本文のリンクで移動することができる状況です。

エラーメッセージ

Chromeのデベロッパーツールには特にエラーは出ていません。

該当のソースコード

ソースコード

試したこと

          <style>
          #map_<%= post.book_id %>_<%= post.id %> {
            height: 130px;
            width:100%;
          }
          </style>

ここで表示範囲の指定を様々な書き方で行いましたが、はみ出ている非表示の部分については影響ありませんでした。調べて見たのですが、対策方法がわかりません。
よろしくお願いします。