質問編集履歴
5
ブラウザコンソールのエラーは、他のサイトを見ても出ていることに気づきました。本件の質問とは関係無さそうだと判断しました。そのため、申し訳ありませんが、質問のタイトルも修正させて頂きます。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
LeafletでGoogleマップを表示
|
|
1
|
+
LeafletでGoogleマップを表示したいが、表示されない。
|
body
CHANGED
|
@@ -8,12 +8,14 @@
|
|
|
8
8
|
https://leafletjs.com/examples/quick-start/
|
|
9
9
|
|
|
10
10
|
### 発生している問題・エラーメッセージ
|
|
11
|
-
実際に起動してみ
|
|
11
|
+
実際に起動してみましたが、地図は表示されません。
|
|
12
12
|
|
|
13
|
+
ブラウザコンソールを見ると、下記のエラーが出ていました。（しかし、こちらのエラーは他のサイトを見ても出ていることに、後になって気づきました。本件の質問とは関係無さそうだと判断しました。そのため、申し訳ありませんが、質問のタイトルも修正させて頂きます。）
|
|
13
14
|
> DevTools failed to parse SourceMap
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
|
|
18
|
+
|
|
17
19
|
### 該当のソースコード
|
|
18
20
|
※ご回答を頂き、現在は修正しています（下記「ご回答を踏まえた修正」に記載）
|
|
19
21
|
|
|
@@ -76,10 +78,5 @@
|
|
|
76
78
|
|
|
77
79
|
という表示がなされるようになりました。
|
|
78
80
|
しかし、まだ、地図は表示されない状況です。
|
|
79
|
-
また、chromeのブラウザコンソール上の下記のエラー（「Devtools failed to parse SourceMap」）は相変わらず表示されます。
|
|
80
|
-
|
|
81
|
-
そして、Firefoxで見てみたところ、ブラウザコンソールに下記のエラー（Source map error
|
|
82
|
-
）が出ていましたので、念のため貼らせて頂きます。
|
|
83
|
-
|
|
84
81
|
|
|
85
82
|
何か、お気づきの点がありましたら、ご教示頂ければ幸いです。よろしくお願い致します。
|
4
ご回答を踏まえた修正箇所を分かるようにした
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,16 +8,14 @@
|
|
|
8
8
|
https://leafletjs.com/examples/quick-start/
|
|
9
9
|
|
|
10
10
|
### 発生している問題・エラーメッセージ
|
|
11
|
-
実際に起動してみると、地図は表示されず、下記のように、
|
|
12
|
-
|
|
13
|
-
という表示がなされます。
|
|
14
|
-
ブラウザコンソールを見ると、下記のエラーが出ていました。
|
|
11
|
+
実際に起動してみると、地図は表示されず、ブラウザコンソールを見ると、下記のエラーが出ていました。
|
|
15
12
|
|
|
16
13
|
> DevTools failed to parse SourceMap
|
|
17
14
|
|
|
18
15
|
|
|
19
16
|
|
|
20
17
|
### 該当のソースコード
|
|
18
|
+
※ご回答を頂き、現在は修正しています（下記「ご回答を踏まえた修正」に記載）
|
|
21
19
|
|
|
22
20
|
```html
|
|
23
21
|
{% extends "base.html" %}
|
|
@@ -26,20 +24,15 @@
|
|
|
26
24
|
{% block extrahead %}
|
|
27
25
|
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
|
|
28
26
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
29
|
-
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
27
|
+
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
|
|
28
|
+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
29
|
+
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
|
|
30
|
-
|
|
30
|
+
<script type="text/javascript">
|
|
31
|
+
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
32
|
+
</script>
|
|
31
33
|
{% endblock %}
|
|
32
34
|
{% block content %}
|
|
33
|
-
<div id="mapid" style="height: 150px"></div>
|
|
34
|
-
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
35
|
-
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
36
|
-
|
|
35
|
+
<div id="mapid"></div>
|
|
37
|
-
<script type="text/javascript">
|
|
38
|
-
var mymap;
|
|
39
|
-
document.addEventListener( 'DOMContentLoaded' , function( e ) {
|
|
40
|
-
mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
41
|
-
}, false );
|
|
42
|
-
</script>
|
|
43
36
|
{% endblock %}
|
|
44
37
|
```
|
|
45
38
|
|
|
@@ -53,4 +46,40 @@
|
|
|
53
46
|
django-bootstrap4 1.1.1
|
|
54
47
|
django-leaflet 0.26.0
|
|
55
48
|
|
|
49
|
+
### ご回答を踏まえた修正
|
|
50
|
+
kei344さんから頂いたアドバイスに従って、JavaScriptのコードを読み込む位置を、<div id="mapid">の後ろに持って行きました。
|
|
51
|
+
また、
|
|
52
|
+
> <div id="mapid" style="height: 150px"></div>
|
|
53
|
+
|
|
54
|
+
という形で、cssを追記しました。
|
|
55
|
+
修正後のコードは、下記の通りです。
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
{% extends "base.html" %}
|
|
59
|
+
{% load static %}
|
|
60
|
+
{% load bootstrap4 %}
|
|
61
|
+
{% block extrahead %}
|
|
62
|
+
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
|
|
63
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
64
|
+
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
|
|
65
|
+
{% endblock %}
|
|
66
|
+
{% block content %}
|
|
67
|
+
<div id="mapid" style="height: 150px"></div>
|
|
68
|
+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
69
|
+
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
|
|
70
|
+
<script type="text/javascript">
|
|
71
|
+
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
72
|
+
</script>
|
|
73
|
+
{% endblock %}
|
|
74
|
+
```
|
|
75
|
+
その結果、
|
|
76
|
+
|
|
77
|
+
という表示がなされるようになりました。
|
|
78
|
+
しかし、まだ、地図は表示されない状況です。
|
|
79
|
+
また、chromeのブラウザコンソール上の下記のエラー（「Devtools failed to parse SourceMap」）は相変わらず表示されます。
|
|
80
|
+
|
|
81
|
+
そして、Firefoxで見てみたところ、ブラウザコンソールに下記のエラー（Source map error
|
|
82
|
+
）が出ていましたので、念のため貼らせて頂きます。
|
|
83
|
+
|
|
84
|
+
|
|
56
85
|
何か、お気づきの点がありましたら、ご教示頂ければ幸いです。よろしくお願い致します。
|
3
kei344さんから頂いたアドバイスを基に、コードを修正しましたので、反映させて頂きました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,7 +8,10 @@
|
|
|
8
8
|
https://leafletjs.com/examples/quick-start/
|
|
9
9
|
|
|
10
10
|
### 発生している問題・エラーメッセージ
|
|
11
|
+
実際に起動してみると、地図は表示されず、下記のように、
|
|
12
|
+
|
|
13
|
+
という表示がなされます。
|
|
11
|
-
|
|
14
|
+
ブラウザコンソールを見ると、下記のエラーが出ていました。
|
|
12
15
|
|
|
13
16
|
> DevTools failed to parse SourceMap
|
|
14
17
|
|
|
@@ -22,19 +25,22 @@
|
|
|
22
25
|
{% load bootstrap4 %}
|
|
23
26
|
{% block extrahead %}
|
|
24
27
|
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
|
|
25
|
-
|
|
28
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
26
29
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
27
30
|
crossorigin=""/>
|
|
31
|
+
{% endblock %}
|
|
32
|
+
{% block content %}
|
|
33
|
+
<div id="mapid" style="height: 150px"></div>
|
|
28
34
|
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
29
35
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
30
36
|
crossorigin=""></script>
|
|
31
37
|
<script type="text/javascript">
|
|
38
|
+
var mymap;
|
|
39
|
+
document.addEventListener( 'DOMContentLoaded' , function( e ) {
|
|
32
|
-
|
|
40
|
+
mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
41
|
+
}, false );
|
|
33
42
|
</script>
|
|
34
43
|
{% endblock %}
|
|
35
|
-
{% block content %}
|
|
36
|
-
<div id="mapid"></div>
|
|
37
|
-
{% endblock %}
|
|
38
44
|
```
|
|
39
45
|
|
|
40
46
|
### 補足情報（FW/ツールのバージョンなど）
|
2
タイトルを修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
LeafletでGoogleマップを表示
|
|
1
|
+
LeafletでGoogleマップを表示すると「DevTools failed to parse SourceMap」というエラーが出る
|
body
CHANGED
|
File without changes
|
1
タグに「JavaScript」を追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|