前提・実現したいこと

Monacaを利用して、Onsenui+javascriptにてアプリを制作しています。
サイドバーをで作成して、その中のアイテムを選択すると、googlemapをiframeで表示したいと考えいております。

発生している問題・エラーメッセージ

サイドバー単体では動作は問題ないのですが、iframeを使用するとmap表示がされなくなります。
iframeを優先させるとサイドバーが閉じなくなります。

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <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'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/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">

<script>
    window.fn = {};

    //初期読み込み時のマップ表示
    window.onload = function() {
      "use strict";
      var url = "https://maps.google.co.jp/maps";
      var param = {
          tokyo: {
            center: { lat: 35.681661, lng: 139.767185 }
          },
          zoom: 18,
          lang: "ja"
        };
      var name = "tokyo"
      var iframe = document.getElementById("ifr");
      // パラメータ指定
      var p = "?output=embed"
            + "&ll=" + param[name].center.lat.toString() + "," + param[name].center.lng.toString()
            + "&z=" + param.zoom.toString()
            + "&hl=" + param.lang;
      iframe.setAttribute("src", url + p);
    }

    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };

    window.fn.load = function(page,name) {
      "use strict";
      var url = "https://maps.google.co.jp/maps";
      var param = {
          tokyo: {
            center: { lat: 35.681661, lng: 139.767185 }
          },
          oosaka: {
            center: { lat: 34.702803, lng: 135.495908 }
          },
          zoom: 18,
          lang: "ja"
        };

      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      var iframe = document.getElementById("ifr");
      // パラメータ指定
      var p = "?output=embed"
            + "&ll=" + param[name].center.lat.toString() + "," + param[name].center.lng.toString()
            + "&z=" + param.zoom.toString()
            + "&hl=" + param.lang;
      iframe.setAttribute("src", url + p);
      //alert(url + p);

      content.load(page)
        .then(menu.close.bind(menu));
    };
</script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Map</div>
    </ons-toolbar>
<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('map1.html','tokyo')" tappable>
          東京駅
        </ons-list-item>
        <ons-list-item onclick="fn.load('map2.html','oosaka')" tappable>
          大阪駅
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="map1.html"></ons-splitter-content>
</ons-splitter>

<template id="map1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        東京駅
      </div>
    </ons-toolbar>
    <iframe id="ifr" width="100%" height="100%"></iframe>
  </ons-page>
</template>

<template id="map2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        大阪駅
      </div>
    </ons-toolbar>
    <iframe id="ifr" width="100%" height="100%"></iframe>
  </ons-page>
</template>
  </ons-page>
</body>
</html>

試したこと

iframeのsrcに入れるデータをalertで表示させてみましたが、ちゃんと関数内で受け取れていました。

  content.load(page)
    .then(menu.close.bind(menu));

javascript内のcontent.loadのタイミングが一番悪さをしていそうですが、どう修正していいかわかりません。

よい方法を教えていただけますでしょうか？
お願い致します。

使用

フレームワーク：onsenui
言語:HTML+CSS+javascript