Monacaのエラーの解決法を教えてください。

前提・実現したいこと

Monacaを使い始めて数か月のプログラミング初心者です。

Monacaで地図を表示させるアプリケーションを制作しています。
（地図の出力にはGoogle Maps JavaScript APIを用いています）
制作上で発生したエラーの解決方法と地図の表示方法を教えてください。
参考にしているのは2015年に発売された
「クラウドできるHTML5ハイブリッドアプリ開発...」です。

発生している問題・エラーメッセージ

まずコードを入力した上で実行したときのエラーメッセージは以下になっています。
・エラーメッセージ
ReferenceError: Can't find variable: angular

TypeError: ons.bootstrap is not a function. (In 'ons.bootstrap()', 'ons.bootstrap' is undefined)

エラーメッセージの具体的な解決方法がいくら調べてもわかりません。

また、geolocationプラグインを使用して現在位置を地図上に表示してマーカーを出力するアプリを
作っているのですが地図が実機を通しても表示されません。
参考書のコードは一部変更して書いています。

該当のソースコード

<!DOCTYPE HTML>
<html>
   
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="http://maps.googleapis.com/maps/api/js?key=MY KEY"></script>
    
  <body>
	<br />
  <ons-modal var="myModal">
    位置情報を取得中…
  </ons-modal>
  <ons-page>
    <ons-toolbar>
      <div class="center">現在位置アプリ</div>
    </ons-toolbar>
    <div id="map"></div>
    <ons-bottom-toolbar style="text-align: right;">
      <ons-toolbar-button class="put-marker"><ons-icon icon="fa-map-marker"
      size="20px"></ons-icon>現在地をマークする</ons-toolbar-button>
    </ons-bottom-toolbar>
    </ons-page>  
  </body>
    <script>
    ons.bootstrap();

    var map;
    ons.ready(function(){
        myModal.show();
      
        //高精度の位置情報を要求する（衛星による測位）
        var options = {maximumAge: 3000, timeout: 5000, enableHighAccuracy: true};
        navigator.geolocation.getCurrentPosition(function(position){
            createMap(position);
        }, function(result){
            myModal.hide();
            onError(result);
        }, options);

        $(document).on('click','.put-marker',function(){
            putMarker();
        });
    });

    function createMap(position){/*createMap()関数の記述*/};
    function putMarker(){/*putMarker()関数の記述*/};
    function pnError(positionError){/*onError()関数の記述*/};

    function createMap(position) {
        var latlng = new google.naps.Latlng(position.coords.latitude, position.coords.longitude);

        //地図のズーム値、センター位置、タイプを指定
        var mapOption = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //地図を作成
        map = new google.maps.Map($('#map')[0],mapOption);
        google.maps.event.addListener(map, "tilesloaded",function(){
          myModal.hide();
        })
    };

    function onError(positionError){
        var code = positionError.code;
        switch(code){
            case 1:
                errorMessage = '位置情報の取得がユーザーによって許可されていません。';
                break;
            case 2:
                errorMessage = '位置情報の取得が行えません。';
                break;
            case 3:
                errorMessage = '時間切れです。位置情報が利用できない可能性があります。';
                break;
            default:
                errorMessage = 'エラーが発生しました。' +code;
        }
        ons.notification.alert({ message: errorMessage });
    };
    </script>
</head>

</html>

試したこと

補足情報（FW/ツールのバージョンなど）

参考書でのGoogle Map機能の読み込みのコードです。

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

回答1件

ベストアンサー

こちらのソースコードは、Onsen UI ver.1で書かれています。
現在、Monacaで新しいプロジェクトを作るとOnsen UI ver.2が組み込まれます。
ドキュメントを参考に、ソースコードをOnsen UI 2に直してみてください。

参考：Onsen UI 1.x からの移行
https://ja.onsen.io/v1/from-v1-to-v2.html

参考：Onsen UIをバージョン1から2へ移行するには
https://press.monaca.io/atsushi/260

投稿2018/10/27 04:28

coboco

総合スコア121

haniwaoshi

2018/10/27 04:41

回答ありがとうございます。早速ソースコードを直してみます。 Google mapsの読み込みのソースコードに関しては問題ないでしょうか。

coboco

2018/10/27 04:45

動かしてみないことにはわからないですが、少なくともエラーメッセージはOnsen UIに関するものです。

haniwaoshi

2018/10/27 05:22

少し手を加えたところエラーメッセージが変化しました。・エラーメッセージ Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior. Error in Success callbackId: Geolocation1771561628 : TypeError: undefined is not an object (evaluating 'new google.naps.Latlng') Onsen UIのコンポーネントは機能していますが肝心のマップが表示されません。

coboco

2018/10/27 05:26

1つ目のエラーはやはりOnsen UI関係なので、新しくOnsen UIテンプレートでプロジェクトを作り直して見たほうがいいかもしれません。 2つ目のエラーは、スペルミスじゃないでしょうか。 naps → maps あと、大文字にしないといけない箇所があるように思います。 Google Mapsのドキュメントを見てみて下さい。

haniwaoshi

2018/10/27 06:26

丁寧なアドバイスのおかげで Google mapが実機で表示されました。原因はコードの一部のスペルミスと大文字でした。まだ少しエラーが残ってるようなので新しくOnsen UIテンプレートでプロジェクトを作り直してみます。今回はありがとうございました。ベストアンサーにさせていただきます。

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