問題
<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: '© <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: '© <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: '© <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 公式のサンプルコードがベースです。