google map API エラーは出ていないのに表示されない。

Question

何回もgoogle map APIを使ってサイト上に地図表示をしてきました。
ジオコーディングを使って住所から地図作成をするやり方です。

しかしながら、このところの作業で地図表示が出来なくなりました。

試しにgoogle map APIドキュメントのサンプルを使ってみましたが同じ結果になります。
https://stray-light.info/test/work/map_test0723.php

<script
  src="https://maps.googleapis.com/maps/api/js?key={自分のキー}&callback=initMap&libraries=&v=weekly"
  async
></script>

<script type="text/javascript">
  let map;

  function initMap() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }
</script>

地図を表示させるdiv要素の中を見てみると、たくさんの要素が作られています。
しかしiframeを開いて
document
html
body
と見ていくとbodyが空です。

グーグルマップの埋め込みコードを貼り付けた場合は当然、このbodyの中身はあるので表示されます。

どこに問題があるのか、どなたかご教示ください。
よろしくお願いします。

Answer 1

読み込んでいる要素に高さが無いため0pxの要素になっているように思います。
cssに

#map_canvas{
	height: 300px;
}

を追記してみてはどうでしょう。

Comments

[odakura]

お忙しいところご回答いただきまして感謝いたします。
ご指摘のように高さ指定しただけですんなり解決しました。

iframe内の要素bodyが空だったのでそのせいで高さ0になっていると思い込んでいました。
本当に助かりました。ありがとうございます！