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

直接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行目からエラーが出ているんですが、他に何か記述しないといけないってことでしょうか？
解決方法が分かる方、教えて頂きたいです。