Onsen UI & Angular JS Google Maps

I am having an issue, getting Google maps to show within my Onsen UI & Angular JS app. Here is the code I am working with -

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>

(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>

The following error message is given when I click the button to go to Page 2

Error a is null

I am assuming that when controller2 is run, the markup has not yet entered the DOM for it to find #map

Can anyone point me in the right direction with how to make this work in the correct manner.

Thanks

Solution

You need to wait until DOM is loaded completely. I guess AngularJS controller initialization started before DOM content is loaded in your app.

I modified your code. And it worked fine in my environment.

app.js

var yourApp = angular.module('myApp', ['onsen.directives']);


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


yourApp.controller("controller2", function($scope, $timeout) {

    $timeout(function(){
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    },200);
});

My App