tabbarを使った１つのページに GoogleMapsを表示させたいのですが、うまく表示させることができません。試行錯誤の結果"ons-page"タグ内で表示できないことがわかりました。

GoogleMapsApiの使用にはプラグインを使っています。
https://github.com/mapsplugin/cordova-plugin-googlemaps

どうかお知恵をお貸しください。

[地図が表示されるコード]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src'self' 'unsafe-inline';" />
    <script type="text/javascript" src="cordova.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <script>
        var app = ons.bootstrap('app', ['onsen']);
        var map;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady(){
            var div = document.getElementById("map_canvas");
            map = plugin.google.maps.Map.getMap(div);
            map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
        }
        function onMapReady() {
            alert('onMapReady');
        }
    </script>
</head>
<body>
    <div style="width:100%;height:640px" id="map_canvas"></div>
</body>
</html>

[地図が表示されないコード]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src*;script-src'self' 'unsafe-inline' 'unsafe-eval'*;style-src'self' 'unsafe-inline';" />
    <script type="text/javascript" src="cordova.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <script>
        var app = ons.bootstrap('app', ['onsen']);
        var map;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady(){
            var div = document.getElementById("map_canvas");
            map = plugin.google.maps.Map.getMap(div);
            map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
        }
        function onMapReady() {
            alert('onMapReady');
        }
    </script>
</head>
<body>
    <ons-page id="page-map"><!-- 違いはこのタグだけです -->
    <div style="width:100%;height:640px" id="map_canvas"></div>
    </ons-page>
</body>
</html>