質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2690閲覧

Leaflet  javascriptを別ファイルにするとエラーが出て表示されない。

okkeeeee

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/09/07 11:02

直接scriptを記述したら、マップが表示されるんですが、scriptを別ファイルにすると読み込まれなくなります。なにが原因が教えて頂きたいです。

以下サイトを参考にしました。

https://qiita.com/s_fujii/items/adbe3b35cd350e23d08d

これだと正常にマップが表示されます。
map_display.html

html

1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>地図表示</title> 7     8 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 9 <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 11 <link rel="stylesheet" type="text/css" href="common.css"> 12</head> 13 14<body> 15 <div class="container"> 16 <div id="map"></div> 17 </div> 18 <script> 19 var map = L.map('map').setView([36.575, 135.984], 5); // 日本を中心に設定 20 21 var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 22 attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 23 maxZoom: 19 24 }); 25 tileLayer.addTo(map); 26 27 </script> 28 29</body> 30 31 32 </script> 33 34</body>

common.css

css

1#map { 2 width: 500px; 3 height: 500px; 4}

↑の正常に動いていたscriptを別ファイルとして↓のように分けます。
map_display.html

HTML

1 2<!doctype html> 3<html lang="ja"> 4 5<head> 6 <meta charset="utf-8"> 7 <title>地図表示</title> 8     9 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 10 <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 12 <script type="text/javascript" src="map_display.js"></script> 13 <link rel="stylesheet" type="text/css" href="common.css"> 14</head> 15 16<body> 17 <div class="container"> 18 <div id="map"></div> 19 </div> 20</body> 21

map_display.js

javascript

1var map = L.map('map').setView([36.575,135.984], 5); // 日本を中心に設定 2 3var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ 4 attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 5 maxZoom: 19 6 }); 7tileLayer.addTo(map);

css

1#map { 2 width: 500px; 3 height: 500px; 4}

全く同じ内容なのにjavascriptを別ファイルにしたら起動しなくなります。
検証を使ってみると
leaflet.js:6 Uncaught Error: Map container not found.
at e._initContainer (leaflet.js:6)
at e.initialize (leaflet.js:6)
at new e (leaflet.js:6)
at Object.o.map (leaflet.js:6)
at map_display.js:1
と表示されます。

1行目からエラーが出ているんですが、他に何か記述しないといけないってことでしょうか?
解決方法が分かる方、教えて頂きたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<script type="text/javascript" src="map_display.js"></script></body>直前に移動する。

投稿2020/09/07 11:12

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okkeeeee

2020/09/07 11:33

ありがとうございます。 scriptって<head>の中だけだと思っていました。。。 なぜ</body>直前とわかったんでしょうか? <head>の中に書くものと</body>直前に書くものでどのような違いがあるのでしょうか?
kei344

2020/09/07 11:37

<head>の中で実行される時点ではまだHTMLの<body>すらできていません。スクリプト側でロードを待つか、確実にできている位置に置くかどちらかです。 「JavaScript DOMContentLoaded 」とかで検索してみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問