monaca + onsen ui でons-tabとons-navigatorを組み合わせタブ画面でscriptが使いたいです

前提・実現したいこと

マッチングアプリの様なものを作成しており、
tabbarを表示させつつ、各タブからそれぞれ画面遷移させ各ページ（
タブ１
グーグルマップの表示　→プロフィール表示
タブ２
ユーザー検索　→　プロフィール表示
タブ３
トーク履歴　→ メッセージ送受信画面
タブ４
プロフィール編集
）
に飛べるようにしたいと思っています。

タブ2、3、4は思い通りのものを作成出来たのですが、タブ1のグーグルマップの表示だけが何度試しても上手く行きません。
①map.htmlを試しにindex.htmlに貼り付けた場合、表示される
②エラーは出ていない
ので呼び出し方がおかしいなど初歩的な部分が原因だと思っています。
どうやったら表示出来るかをご教授戴きたいです。

該当のソースコード

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-page ng-controller="AppController">
    <ons-tabbar position="bottom">
      <ons-tab page="home.html" label="ページ１" icon="map" active></ons-tab>
      <ons-tab page="xx.html" label="ページ２" icon="user"></ons-tab>
      <ons-tab page="xxx.html" label="ページ３" icon="comment"></ons-tab>
      <ons-tab page="xxxx.html" label="ページ４" icon="gear"></ons-tab>
    </ons-tabbar>
  </ons-page>
</body>

home.html

<ons-page>
  <ons-navigator var="home.nav" page="map.html"></ons-navigator>
</ons-page>

map.html

<script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 35.6811673, lng: 139.7670516 },
        zoom: 12
      });
    }
  </script>

  <style>
    #map {
      height: 100%;
    }
  </style>
  
  <ons-page>
    <ons-toolbar>
      <div class="center">Google Map Test</div>
    </ons-toolbar>
    <div id="map">
      <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxx&callback=initMap" async defer></script></div>
  </ons-page>