3

Onsen UI & Angular JS アプリ内に Google マップを表示する際に問題が発生しています。これが私が使用しているコードです-

index.html

<body ng-controller="mainController">    
  <ons-screen>
    <ons-navigator title="Page 1">        
        <div class="center">
          <h1>Page 1</h1>
          <ons-button ng-click="pushMe()">Push Page 2</ons-button> 
        </div>
    </ons-navigator>
  </ons-screen>
</body>

JS

(function(){
    'use strict';
    angular.module('myApp', ['onsen.directives']);


})();

function mainController($scope){
    $scope.pushMe = function(){
        $scope.ons.navigator.pushPage('page2.html');
    }
}

function controller2($scope){
    var mapOptions = {
        center: new google.maps.LatLng(43.069452, -89.411373),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

Page2.html

<ons-page class="center" ng-controller="controller2">

<ons-navigator-toolbar
    title="Page 2">     
</ons-navigator-toolbar>

<h2>Page 2</h2>
<div id="map"></div>

ボタンをクリックしてページ 2 に移動すると、次のエラー メッセージが表示されます。

Error a is null

controller2 が実行されたとき、マークアップはまだ DOM に入っていないと仮定しています。#map

これを正しい方法で機能させる方法について、誰かが私を正しい方向に向けることができますか?

ありがとう

4

1 に答える 1