

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

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

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

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

[code]

    <!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>
[/code]

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

[code]

    <!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>
[/code]


CC BY-SA 3.0
2016-01-07T05:46:45.383
20699
2017-08-01T09:38:45.347
13920
question
onsen-ui
OnsenUI＋GoogleMaps ons-page内で表示されない tabbarで表示したい


自己解決しました。  
onsenui が生成する背景が地図を隠してしまうことが原因でした。

■対策  
jQueryかzeptoで邪魔をしている背景を消してあげます。  
ons.readyで消すと地図のロード完了まで画面が真っ黒になってしまうので、MAP_READYで消してあげるといいです。

ということで、動作するコードです。

【onsenui ＋ googlemap 動作するコード】

[code]

    <!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>
        <script src="lib/zepto/zepto.min.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() {
                // ↓↓↓　これです！　↓↓↓
                $('.page__background').css('background-color', 'rgba(0,0,0,0)');
            }
        </script>
    </head>
    <body>
        <ons-page id="page-map">
        <div style="width:100%;height:640px" id="map_canvas"></div>
        </ons-page>
    </body>
    </html>
[/code]

ココにもありました。  
<https://github.com/mapsplugin/cordova-plugin-
googlemaps/issues/199#issuecomment-56475636>


CC BY-SA 3.0
2016-01-08T11:18:10.247
20752
2016-01-08T11:18:10.247
13920
20699
answer