LeafletでGoogleマップを表示したいが、表示されない。

Question

前提・実現したいこと

地元の飲食店のテイクアウト情報について、Ｇｏｏｇｌｅマップを使ったまとめサイトを作ろうとしています。
Googleマップと連携する際、django-leafletというものが使えるのではないかと思いました。
https://pypi.org/project/django-leaflet/

まずは、Djangoとの連携の前にLeafletの使い方を把握しようと思い、下記のQuickStartを参考にしてやってみようとしました。
https://leafletjs.com/examples/quick-start/

発生している問題・エラーメッセージ

実際に起動してみましたが、地図は表示されません。

ブラウザコンソールを見ると、下記のエラーが出ていました。（しかし、こちらのエラーは他のサイトを見ても出ていることに、後になって気づきました。本件の質問とは関係無さそうだと判断しました。そのため、申し訳ありませんが、質問のタイトルも修正させて頂きます。）

DevTools failed to parse SourceMap

該当のソースコード

※ご回答を頂き、現在は修正しています（下記「ご回答を踏まえた修正」に記載）

{% extends "base.html" %}
{% load static %}
{% load bootstrap4 %}
{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
<script type="text/javascript">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script>
{% endblock %}
{% block content %}
<div id="mapid"></div>
{% endblock %}

補足情報（FW/ツールのバージョンなど）

開発環境で作業をしており、
http://127.0.0.1:8000/
で起動しています。
何のエラーも出ておらず、Djangoの起動自体には問題ないと思います。
関係無いかもしれませんが、バージョンを記載します。
Django 3.0.5
django-bootstrap4 1.1.1
django-leaflet 0.26.0

ご回答を踏まえた修正

kei344さんから頂いたアドバイスに従って、JavaScriptのコードを読み込む位置を、<div id="mapid">の後ろに持って行きました。
また、

<div id="mapid" style="height: 150px"></div>

という形で、cssを追記しました。
修正後のコードは、下記の通りです。

{% extends "base.html" %}
{% load static %}
{% load bootstrap4 %}
{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
{% endblock %}
{% block content %}
<div id="mapid" style="height: 150px"></div>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
<script type="text/javascript">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script>
{% endblock %}

その結果、

という表示がなされるようになりました。
しかし、まだ、地図は表示されない状況です。

何か、お気づきの点がありましたら、ご教示頂ければ幸いです。よろしくお願い致します。

Comments

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

[退会済みユーザー]

申し訳ありません。修正した箇所が分かるように記載します。

Answer 1

L.map('mapid')をHTMLのロードを待つようにするか、そのscriptごと<div id="mapid"></div>の後ろに持っていってみてください。

var mymap;
document.addEventListener( 'DOMContentLoaded' , function( e ) {
	mymap = L.map('mapid').setView([51.505, -0.09], 13);
}, false ); // HTMLのロードを待つ

【Window: DOMContentLoaded イベント - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event

<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script><!-- 後ろに持っていく -->

---

また、スタイルがあたっていない可能性もあります。その場合は下記のようにすれば表示されます。

<div id="mapid" style="height: 150px"></div>

Comments

[退会済みユーザー]

ありがとうございます。
ご教示頂いた通りコードを直したら、
+-
Leaflet
と表示されるようになりました。
しかし、まだ地図は表示されないままです…

[退会済みユーザー]

現状の形で、質問を修正させて頂きます。