0
を表示するドットGoogleマップを完全に表示することができます。のGoogleマップは、私は温泉UIで使用するプラグインをGoogleマップに懸念を持っている温泉UIページに
私はOnsen UIのサイドメニューから他のページに移動すると、移動したページのいずれにもGoogleマップが表示されなくなります。 index.htmlページに戻ると、もう動作しません（マップは白で表示されます）。
私はナビゲーター定義で任意のスタートページ属性を入れて、それはどちらも（ONS-ナビゲーターID =「ナビ」ページ=「start_page」/ONS-ナビゲーター）私は聞かせて理由で動作しない場合は、次のアドオンを-navigator id = "navi"/ons-navigator
この問題に関する似たようなトピックがありますが、閉じられていて問題は修正されていません：github.com/mapsplugin/cordova-plugin-googlemaps/issues/ 324
シーケンスと問題を説明するためにpdfファイルを添付します（ダウンロードせずにオンラインで見ることができます）：
ここにあなたの助け
いただき、誠にありがとうございます私のIndex.htmlと次のとおりです。ここで
<!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>
<!-- meta Charset-->
<meta charset='utf-8'>
<script src='js/angular.min.js'></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel='stylesheet' href='onsenui/css/onsenui.css'/>
<link rel='stylesheet' href="css/onsen-css-components.css"/>
<script src='onsenui/js/onsenui.js'></script>
<script src='onsenui/js/angular-onsenui.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width'>
</head>
<body ng-controller="AppCtrl">
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable >
<ons-page>
<ons-list>
<ons-list-item>
<div class="text_menu_color" ng-click="fn.load('index.html')">Index</div>
</ons-list-item>
<ons-list-item>
<div class="text_menu_color" ng-click="fn.load('html/dashboard.html')">Dashboard</div>
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="navi"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
<h3>Index.html</h3>
<div id="map_canvas_1" style="position:fixed;width:160px;height:320px;left:10px;bottom:150px;background: blue;border: 2px solid black"><h3>map 1</h3></div>
<button ng-click="show_map_1()" style="position:fixed;width:160px;height:100px; left:10px;bottom:30px">Show map 1</button>
<script>
ons.platform.select('android')
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {window.powermanagement.acquire()}
angular.module('app', ['onsen'])
.controller('AppCtrl', function($scope) {
$scope.show_map_1 = function(){
$scope.map_1=""
$scope.map_1 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
$scope.map_1.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_1)
}
$scope.show_map_2 = function(){
$scope.map_2=""
$scope.map_2 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
$scope.map_2.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_2)
}
$scope.onMapReady_1 = function() {
$scope.map_1.setDiv(document.getElementById('map_canvas_1'))
$scope.map_1.refreshLayout();
$scope.map_1.setBackgroundColor('green')
}
$scope.onMapReady_2 = function() {
$scope.map_2.setDiv(document.getElementById('map_canvas_2'))
$scope.map_2.refreshLayout();
$scope.map_2.setBackgroundColor('green')
}
$scope.fn = {};
$scope.fn.load = function(page) {
var menu = document.getElementById('menu');
var navi = document.getElementById('navi');
menu.close();
navi.resetToPage(page, {animation: 'slide', animationOptions:{duration: 0.4, delay: 0, timing: 'ease-in'}});
};
})
</script>
</body>
</html>
は私Dashboard.htmlです：
<ons-page>
<h3>Dashboard.html</h3>
<div id="map_canvas_2" style="position:fixed;width:160px;height:320px;right:10px;bottom:150px;background: blue;border: 2px solid black" ><h3>map 2</h3></div>
<button ng-click="show_map_2()" style="position:fixed;width:160px;height:100px; right:10px;bottom:30px" >Show map 2</button>
</ons-page>