title: Onsen UI & Angular JS Google Maps
body: <p>I am having an issue, getting Google maps to show within my Onsen UI &amp; Angular JS app. Here is the code I am working with -</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;body ng-controller="mainController"&gt;    
    &lt;ons-screen&gt;
      &lt;ons-navigator title="Page 1"&gt;        
          &lt;div class="center"&gt;
            &lt;h1&gt;Page 1&lt;/h1&gt;
            &lt;ons-button ng-click="pushMe()"&gt;Push Page 2&lt;/ons-button&gt; 
          &lt;/div&gt;
      &lt;/ons-navigator&gt;
    &lt;/ons-screen&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(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);
  }
  </code></pre>
  
  <p><strong>Page2.html</strong></p>
  
  <pre><code>&lt;ons-page class="center" ng-controller="controller2"&gt;
  
  &lt;ons-navigator-toolbar
      title="Page 2"&gt;     
  &lt;/ons-navigator-toolbar&gt;
  
  &lt;h2&gt;Page 2&lt;/h2&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The following error message is given when I click the button to go to Page 2</p>
  
  <pre><code>Error a is null
  </code></pre>
  
  <p>I am assuming that when controller2 is run, the markup has not yet entered the DOM for it to find <code>#map</code></p>
  
  <p>Can anyone point me in the right direction with how to make this work in the correct manner.</p>
  
  <p>Thanks</p>