OnsenUIのTemplateを分けるとGoogleMapが動作しない

前提・実現したいこと

現在OnsenUI＋CordovaでGoogleMapを表示させるハイブリッドアプリを作成しています。
（ここではAndroidやiOSの特徴のエラーではないことを注意してください。）
その中で、 Onsen-tab やons-splitterを使うことになったのですが、<ons-template>でページを分けるときにGoogleMapのIdが読み取られない？という結果が得られました。
エラー内容としてはこちらと同じ内容です。

templateを分けつつ適切にidを指定したり、JavaScriptを読み込むにはどうすればよいでしょうか？

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19
20    window.fn = {};
21    window.fn.open = function() {
22      var menu = document.getElementById('menu');
23      menu.open();
24    };
25    window.fn.load = function(page) {
26      var content = document.getElementById('content');
27      var menu = document.getElementById('menu');
28      content
29        .load(page)
30        .then(menu.close.bind(menu));
31    };
32
33  </script>
34    <script src="js/map.js"></script> <!-- ここにMap関係のものが入っています。こちらは動作確認済みです。 -->
35</head>
36<body>
37  <ons-splitter>
38    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
39      <ons-page>
40        <ons-list>
41          <ons-list-header>Default</ons-list-header>
42          <ons-list-item onclick="fn.load('tab.html')" tappable>
43            Home
44          </ons-list-item>
45          <ons-list-item onclick="fn.load('maps.html')" tappable>
46            Maps
47          </ons-list-item>
48        </ons-list>
49      </ons-page>
50    </ons-splitter-side>
51    <ons-splitter-content id="content" page="tab.html"></ons-splitter-content>
52  </ons-splitter>
53
54  <ons-template id="tab.html">
55    <ons-page>
56              <ons-toolbar>
57            <div class="toolbar" id="top-toolbar">
58                <div class="toolbar__left">
59                  <!-- <span class="toolbar-button">
60                    <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
61                  </span> -->
62                </div>
63              
64                <div class="toolbar__center">
65                  Maps
66                </div>
67              
68                <div class="toolbar__right" onclick="fn.open()">
69                      <span class="toolbar-button">
70                  <ons-icon icon="fa-cog" style="font-size:25px;"></ons-icon>
71                      </span>
72                </div>
73              </div>
74          </ons-toolbar>
75
76             <ons-tabbar position="bottom"> <!--swapble-->
77          <ons-tab page="maps.html" label="マップ" icon="ion-map" active>
78          </ons-tab>
79          <ons-tab page="lists.html" label="リスト" icon="ion-ios-list-outline">
80          </ons-tab>
81        </ons-tabbar>
82    </ons-page>
83  </ons-template>
84
85  <ons-template id="maps.html">
86      <ons-page id="Maps">
87          <div id="map"></div>
88          <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXここには適切なコードが入っています。XXXXXXXXXXXX&callback=initMap" async defer></script>
89
90      </ons-page>
91  
92  </ons-template>
93
94  <ons-template id="lists.html">
95    <ons-page>    
96<ons-list>
97</ons-list>
98    </ons-page>
99  </ons-template>
100
101
102</body>
103</html>
104

試したこと

templateを分けずに実装すると動きますが、tamplateを分けた瞬間から動作しません。JavaScriptの読み込み位置なども工夫してみましたが、動く気配はありません。

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

{
    "name": "map",
    "dependencies": {
        "cheerio": "^1.0.0-rc.3",
        "cordova-android": "^8.0.0",
        "cordova-browser": "^6.0.0",
        "cordova-custom-config": "^5.1.0",
        "cordova-ios": "^5.0.0",
        "cordova-plugin-mapbox": "^1.2.3",
        "cordova-plugin-splashscreen": "5.0.1",
        "cordova-plugin-whitelist": "1.3.3",
        "csp-parse": "0.0.2",
        "monaca-plugin-monaca-core": "3.2.1",
        "node-sass": "^4.12.0",
        "node-sass-import": "^2.0.1",
        "npm-run-all": "^4.1.5",
        "postcss": "^7.0.14",
        "postcss-cli": "^6.1.2"
    },
    "browserslist": [
        "last 2 versions",
        "not ie < 11",
        "Android >= 6",
        "iOS >= 10"
    ],
    "cordova": {
        "plugins": {
            "cordova-custom-config": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "monaca-plugin-monaca-core": {}
        },
        "platforms": [
            "browser"
        ]
    },
    "scripts": {
        "start": "npm run dev",
        "monaca:preview": "npm run dev",
        "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081",
        "scss": "node-sass --watch --include-path scss www/scss -o www/css --output-style compressed",
        "prefix": "postcss --use autoprefixer --no-map www/css -d www/css",
        "test": "npm-run-all -p dev scss prefix"
    },
    "devDependencies": {
        "autoprefixer": "^9.5.1",
        "browser-sync": "^2.26.4",
        "cordova": "^9.0.0",
        "gulp": "^4.0.1",
        "gulp-postcss": "^8.0.0"
    }
}