OpenStreetMap+Leaflet で「Map container not found.」と出るとき #JavaScript

問題

<html>
<head>
  <!-- 必要な CSS と JavaScript を読み込んでいて･･･ -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
        crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
          integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
          crossorigin=""></script>

  <!-- サンプル通りにスクリプトを書いていて･･･ -->
  <script>
    //                ↓描画先指定 任意のワードにできる
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
</head>

<!-- id="map" の要素を用意しているのに･･･ -->
<body>
  <!--     ↓上で示した描画先指定 -->
  <div id="map" style="width: 800px; height: 600px"></div>
</body>

</html>

Map container not found. と言われてしまう･･･どうして･･･

解法 1

window.addEventListener により、ドキュメント読み込み完了後に、マップ設定のスクリプトが動くようにしてやれば OK です。

  <script>
    window.addEventListener("load", function() {
      var map = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
    });
  </script>

解放 2

(コメントもらってだいぶ経った 2023/05/13 に追記)

@gacktomo さんより、コメントで頂いた方法です。

マップ描画のスクリプトを body の末尾、つまり当該描画先の要素の下にスクリプトを書いてやっても OK です。

<body>
  <div id="map" style="width: 800px; height: 600px"></div>

  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
</body>

原因

HTML が全て読み込まれる前にスクリプトが走ってしまい、その結果書いたはずの <div id="map"> が存在しない状態で動いて、というのが原因です。

getElementById なんかでも、あるはずの要素が null を返される場合、同じ原因であるかもです。

ちなみに Leaflet について、「CSS の後に JS の順で読み込まないと動かない」と他のページにて解説されていますが、JS の後に CSS にしても、なぜか私の環境と上記コードのバージョンだと問題無く動きました。

参考

この記事のコードは、Leaflet 公式のサンプルコードがベースです。