質問編集履歴
5
ブラウザコンソールのエラーは、他のサイトを見ても出ていることに気づきました。本件の質問とは関係無さそうだと判断しました。そのため、申し訳ありませんが、質問のタイトルも修正させて頂きます。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
LeafletでGoogleマップを表示
|
|
1
|
+
LeafletでGoogleマップを表示したいが、表示されない。
|
test
CHANGED
|
@@ -18,15 +18,19 @@
|
|
|
18
18
|
|
|
19
19
|
### 発生している問題・エラーメッセージ
|
|
20
20
|
|
|
21
|
-
実際に起動してみ
|
|
21
|
+
実際に起動してみましたが、地図は表示されません。
|
|
22
22
|
|
|
23
23
|
|
|
24
|
+
|
|
25
|
+
ブラウザコンソールを見ると、下記のエラーが出ていました。（しかし、こちらのエラーは他のサイトを見ても出ていることに、後になって気づきました。本件の質問とは関係無さそうだと判断しました。そのため、申し訳ありませんが、質問のタイトルも修正させて頂きます。）
|
|
24
26
|
|
|
25
27
|
> DevTools failed to parse SourceMap
|
|
26
28
|
|
|
27
29
|
|
|
28
30
|
|
|
29
31
|
|
|
32
|
+
|
|
33
|
+
|
|
30
34
|
|
|
31
35
|
|
|
32
36
|
|
|
@@ -154,16 +158,6 @@
|
|
|
154
158
|
|
|
155
159
|
しかし、まだ、地図は表示されない状況です。
|
|
156
160
|
|
|
157
|
-
また、chromeのブラウザコンソール上の下記のエラー（「Devtools failed to parse SourceMap」）は相変わらず表示されます。
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
そして、Firefoxで見てみたところ、ブラウザコンソールに下記のエラー（Source map error
|
|
162
|
-
|
|
163
|
-
）が出ていましたので、念のため貼らせて頂きます。
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
161
|
|
|
168
162
|
|
|
169
163
|
何か、お気づきの点がありましたら、ご教示頂ければ幸いです。よろしくお願い致します。
|
4
ご回答を踏まえた修正箇所を分かるようにした
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,13 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
### 発生している問題・エラーメッセージ
|
|
20
20
|
|
|
21
|
-
実際に起動してみると、地図は表示されず、下記のように、
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
という表示がなされます。
|
|
26
|
-
|
|
27
|
-
ブラウザコンソールを見ると、下記のエラーが出ていました。
|
|
21
|
+
実際に起動してみると、地図は表示されず、ブラウザコンソールを見ると、下記のエラーが出ていました。
|
|
28
22
|
|
|
29
23
|
|
|
30
24
|
|
|
@@ -37,6 +31,8 @@
|
|
|
37
31
|
|
|
38
32
|
|
|
39
33
|
### 該当のソースコード
|
|
34
|
+
|
|
35
|
+
※ご回答を頂き、現在は修正しています（下記「ご回答を踏まえた修正」に記載）
|
|
40
36
|
|
|
41
37
|
|
|
42
38
|
|
|
@@ -54,33 +50,23 @@
|
|
|
54
50
|
|
|
55
51
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
56
52
|
|
|
57
|
-
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
53
|
+
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
|
|
58
54
|
|
|
55
|
+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
56
|
+
|
|
57
|
+
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
|
|
58
|
+
|
|
59
|
-
|
|
59
|
+
<script type="text/javascript">
|
|
60
|
+
|
|
61
|
+
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
62
|
+
|
|
63
|
+
</script>
|
|
60
64
|
|
|
61
65
|
{% endblock %}
|
|
62
66
|
|
|
63
67
|
{% block content %}
|
|
64
68
|
|
|
65
|
-
<div id="mapid" style="height: 150px"></div>
|
|
66
|
-
|
|
67
|
-
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
68
|
-
|
|
69
|
-
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
<div id="mapid"></div>
|
|
72
|
-
|
|
73
|
-
<script type="text/javascript">
|
|
74
|
-
|
|
75
|
-
var mymap;
|
|
76
|
-
|
|
77
|
-
document.addEventListener( 'DOMContentLoaded' , function( e ) {
|
|
78
|
-
|
|
79
|
-
mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
80
|
-
|
|
81
|
-
}, false );
|
|
82
|
-
|
|
83
|
-
</script>
|
|
84
70
|
|
|
85
71
|
{% endblock %}
|
|
86
72
|
|
|
@@ -108,4 +94,76 @@
|
|
|
108
94
|
|
|
109
95
|
|
|
110
96
|
|
|
97
|
+
### ご回答を踏まえた修正
|
|
98
|
+
|
|
99
|
+
kei344さんから頂いたアドバイスに従って、JavaScriptのコードを読み込む位置を、<div id="mapid">の後ろに持って行きました。
|
|
100
|
+
|
|
101
|
+
また、
|
|
102
|
+
|
|
103
|
+
> <div id="mapid" style="height: 150px"></div>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
という形で、cssを追記しました。
|
|
108
|
+
|
|
109
|
+
修正後のコードは、下記の通りです。
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
|
|
115
|
+
{% extends "base.html" %}
|
|
116
|
+
|
|
117
|
+
{% load static %}
|
|
118
|
+
|
|
119
|
+
{% load bootstrap4 %}
|
|
120
|
+
|
|
121
|
+
{% block extrahead %}
|
|
122
|
+
|
|
123
|
+
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
|
|
124
|
+
|
|
125
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
126
|
+
|
|
127
|
+
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
|
|
128
|
+
|
|
129
|
+
{% endblock %}
|
|
130
|
+
|
|
131
|
+
{% block content %}
|
|
132
|
+
|
|
133
|
+
<div id="mapid" style="height: 150px"></div>
|
|
134
|
+
|
|
135
|
+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
136
|
+
|
|
137
|
+
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
|
|
138
|
+
|
|
139
|
+
<script type="text/javascript">
|
|
140
|
+
|
|
141
|
+
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
142
|
+
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
{% endblock %}
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
その結果、
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
という表示がなされるようになりました。
|
|
154
|
+
|
|
155
|
+
しかし、まだ、地図は表示されない状況です。
|
|
156
|
+
|
|
157
|
+
また、chromeのブラウザコンソール上の下記のエラー（「Devtools failed to parse SourceMap」）は相変わらず表示されます。
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
そして、Firefoxで見てみたところ、ブラウザコンソールに下記のエラー（Source map error
|
|
162
|
+
|
|
163
|
+
）が出ていましたので、念のため貼らせて頂きます。
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
111
169
|
何か、お気づきの点がありましたら、ご教示頂ければ幸いです。よろしくお願い致します。
|
3
kei344さんから頂いたアドバイスを基に、コードを修正しましたので、反映させて頂きました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,7 +18,13 @@
|
|
|
18
18
|
|
|
19
19
|
### 発生している問題・エラーメッセージ
|
|
20
20
|
|
|
21
|
+
実際に起動してみると、地図は表示されず、下記のように、
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
という表示がなされます。
|
|
26
|
+
|
|
21
|
-
|
|
27
|
+
ブラウザコンソールを見ると、下記のエラーが出ていました。
|
|
22
28
|
|
|
23
29
|
|
|
24
30
|
|
|
@@ -46,11 +52,17 @@
|
|
|
46
52
|
|
|
47
53
|
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
|
|
48
54
|
|
|
49
|
-
|
|
55
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
50
56
|
|
|
51
57
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
52
58
|
|
|
53
59
|
crossorigin=""/>
|
|
60
|
+
|
|
61
|
+
{% endblock %}
|
|
62
|
+
|
|
63
|
+
{% block content %}
|
|
64
|
+
|
|
65
|
+
<div id="mapid" style="height: 150px"></div>
|
|
54
66
|
|
|
55
67
|
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
56
68
|
|
|
@@ -60,15 +72,15 @@
|
|
|
60
72
|
|
|
61
73
|
<script type="text/javascript">
|
|
62
74
|
|
|
75
|
+
var mymap;
|
|
76
|
+
|
|
77
|
+
document.addEventListener( 'DOMContentLoaded' , function( e ) {
|
|
78
|
+
|
|
63
|
-
|
|
79
|
+
mymap = L.map('mapid').setView([51.505, -0.09], 13);
|
|
80
|
+
|
|
81
|
+
}, false );
|
|
64
82
|
|
|
65
83
|
</script>
|
|
66
|
-
|
|
67
|
-
{% endblock %}
|
|
68
|
-
|
|
69
|
-
{% block content %}
|
|
70
|
-
|
|
71
|
-
<div id="mapid"></div>
|
|
72
84
|
|
|
73
85
|
{% endblock %}
|
|
74
86
|
|
2
タイトルを修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
LeafletでGoogleマップを表示
|
|
1
|
+
LeafletでGoogleマップを表示すると「DevTools failed to parse SourceMap」というエラーが出る
|
test
CHANGED
|
File without changes
|
1
タグに「JavaScript」を追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|