Onsen UI & Angular JS Google Maps

Question

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

Page 1

Push Page 2

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

Page 2

``` The following error mess…

Accepted Answer

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);
});
```

Onsen UI & Angular JS Google Maps

Solution

Problem