monacaデバッガーで確認すると普通にmap表示されるのに、buildするとmapが表示されない

###前提・実現したいこと
monacaでgooglemapsapiを利用したアプリを作りたい

###発生している問題・エラーメッセージ
monacaデバッガーで確認すると、普通にmap表示されるのに、buildするとmapが表示されず困っています。

###該当のソースコード

html
1<!DOCTYPE HTML>
2<html ng-app="myApp">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv=”Content-Security-Policy” content=”default-src *; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
6    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11      var app = angular.module('myApp', ['onsen']);
12      ons.disableAutoStatusBarFill();
13      // グローバル変数の定義
14      // シミュレーションモード
15      var symlReaders = []; 
16      var readerIndex;
17      var watchID = 0;
18      var myLatlng;
19      var markersArray;
20      var mymarker;
21      var JunroRouteName;
22      var JunroMeigara = new Boolean();
23      var JunroMei = new Boolean();
24      var JunroMemo = new Boolean();
25      // NCMBに登録するときの項目
26      var entryItems = {};
27      // NCMBから削除するときの項目
28      var delItems = {};
29      // マーカー設置とinfowindow設置のタイミングが異なるため、グローバル用のマーカー変数
30      var marker2;
31      // 再開するとき、DB保存済みの配達地点
32      var savedPoints = {};
33      var tmpRoutes = {};
34      // polyline
35      var directionsDisplay;
36      // 判別するためのkey
37      var prePage;
38       
39    </script>
40    <script src="js/ncmb.min.js"></script>
41    <script src="js/con_ncmb.js"></script>
42    <script src="js/factories.js"></script>
43    <script src="js/controllers.js"></script>
44    <script src="js/junro_select.js"></script>
45    <script src="js/junro.js"></script>
46    <script src="js/myposition.js"></script>    
47    <script src="js/msg.js"></script>
48    <script src="http://maps.googleapis.com/maps/api/js?key=XXX"></script>
49
50</head>
51<body>
52    <!--<ons-navigator var="navi" page="map.html">-->
53    <ons-navigator page="start.html" var="navi"></ons-navigator>
54    </ons-navigator> 
55</body>
56</html>

###試したこと
本ソース以外にマップ表示のみする前提で簡易的にソースを書きbuildすると成功する

###補足情報(言語/FW/ツール等のバージョンなど)
monaca html javascript angularJsらへんを使っています

行動規範の内容に同意します

回答1件

ベストアンサー

全コードを見たわけではありませんので的を外しているかもしれませんが、デバッガーとビルドで動きが違った経験としてはcordovaプラグインの読み込み関連のものがありました。

monacaデバッガーには、あらかじめいくつかのcordovaプラグインが内包されています。すなわち、プロジェクトとしてプラグインを有効にしなくても、デバッガーにプラグインが内包されていますので、コードにプラグインを使う前提のコードを書けば動きます。
しかしながら、ビルド時には当然ながらプロジェクトにプラグインは含めない設定になっていますので、ビルドしたアプリを動作させると初期化でコケてしまいエラーになってしまいます。

上記事象に該当してはいませんでしょうか。簡易的なコードでは上手くいったということは、簡易的なコード側にはプラグインを利用するコードが含まれていなかった、といことではないでしょうか。

投稿2017/03/12 04:32

akabee

総合スコア1947

YutaMaeda

2017/03/12 11:18

大変ありがとうございました！解決いたしました。ご指摘の通り、cordovaプラグインが原因であったと思います。デバッガーが最初から内包されているプラグインを、デバッガーのメニューから見れる「このデバッガーについて」 > 「使用プラグイン」から確認し、該当するプラグインを該当プロジェクトで使用する設定を行った後にビルドすると無事mapが表示されるようになりました。正直どのプラグインが有効であったのかまでは、確認すべきではありますが、まずはうまく行ったことに関してのお礼まで。大変ありがとうございました。