前提・実現したいこと
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