GoogleMapが表示されません。

Question

###実現したいこと
作成中のWebサイトにGoogleMapを埋め込みたい。

###現状
マップが表示されません。
記述したwidth: 100%; height: 400px;分の高さは表示されておりますが、真っ白の空白として表示されております。
クロームのコンソール画面には「Uncaught TypeError: Cannot read property 'firstChild' of null
」というエラーが表示されております。

###作成手順・試したこと
Googleの公式サイトの手順に従い、サンプルとして記述したものは正常にマップが表示されました。
そのコードをhtmlとcss、jsファイルにて記述するとマップが表示されません。
サンプルから変更した箇所は以下の3点です。
・緯度経度を目的の場所に変更。
・ズームレベルを18に変更。
・クラス名をmap→map-canvasへ変更。

###ソースコード
index.html

<div class="map-canvas">
</div>

※__index.html__のbody終了タグ直前に

<script src="https://maps.googleapis.com/maps/api/js?key=【取得したAPIキー】&callback=initMap" async defer> </script>

を記述しております。

styles.css

.map-canvas {
  width: 100%;
  height: 400px;
}

main.js

 function initMap() {
        var uluru = {lat: 35.941507, lng: 140.138121};
        var map = new google.maps.Map(document.getElementById("map-canvas"), {
          zoom: 18,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

以上の情報で何か原因が分かる方がいらっしゃいましたら、アドバイスいただけないでしょうか。

ご確認よろしくお願いいたします。

Answer 1

classでなくて、idにしたのなら

.map-canvas {
  width: 100%;
  height: 400px;
}

ではなくて、

#map-canvas {
  width: 100%;
  height: 400px;
}

となりますよ。

Comments

[narururu]

スッカリcssの記述を変更することを忘れていました。
ご指摘の通り修正したところ、無事にマップが表示されました。
本当にありがとうございました！！
助かりました！

Answer 2

<div class="map-canvas">

ではなくて、

<div id="map-canvas">

ではないですか＾＾？

Comments

[narururu]

早速のご回答ありがとうございます。
classをidに変更して確認しましたが、マップは表示されないままです(>_<)
うーん、何か別の原因がありそうです。。。

[narururu]

スッカリcssを変更することを忘れていました。
ご指摘の通り修正したところ、無事マップが表示されました！
本当にありがとうございました！
助かりました！