title: config angular-google-maps with ionic-framework
body: <p>I have started an ionic app for work, and one of the features of the cross platform arm is integrating a a Google map api. Currently I choose <a href="http://angular-ui.github.io/angular-google-maps" rel="nofollow">angular-google-maps</a></p>
  
  <p>Now I try config it with ionic like this:</p>
  
  <p>seems eveything is ok but why it dosen't work?</p>
  
  <pre><code>&lt;html ng-app="appMaps"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Map&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"&gt;
      &lt;script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src='//maps.googleapis.com/maps/api/js?sensor=false'&gt;&lt;/script&gt;
      &lt;script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;ion-header-bar class="bar-dark" &gt;
        &lt;h1 class="title"&gt;Google Maps Example&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content&gt;
        &lt;div id="map_canvas" ng-controller="mainCtrl"&gt;
           &lt;ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"&gt;&lt;/ui-gmap-google-map&gt;
        &lt;/div&gt;
      &lt;/ion-content&gt;
  
      &lt;SCRIPT&gt;
      angular.module('appMaps', ['uiGmapgoogle-maps','ionic'])
      .controller('mainCtrl', function($scope) {
          $scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 };
          $scope.options = {scrollwheel: false};
      });
      &lt;/SCRIPT&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>