【GoogleMapAPI】JavaScriptでマップが表示されない

GoogleMapの機能で全くエラーが出ていない状況で
何故かマップが表示されませんでした…。

調べてみると下記のことが考えられるようです。

• APIキーの制限がかかっている

GCPのAPIキーの制限がかかっているせいで
アクセスができておらずマップが表示されないそうです。
この場合はエラーがちゃんと出てくれます。

• divタグで定義していない

タグで表示できているが、
スクリプトで動的にマーカーをつけたい場合は

var map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });

などで変数を使いたくなるでしょう。
なので、単純にタグにid="map"のようにしても
エラーが出てしまいます。
getElementByIdで要素を取得する場合はdivにしないといけないようです。

• divの定義にサイズの定義を入れていない

ここで私は詰まりました。
エラーも表示されませんが、
divで定義するときにはCSSなどでサイズを指定しないといけません！
これが全く気付かずに数時間調べてしまいました…。

.gmap {
    width: 700px;
    height: 400px;
}