title: Inserting google maps api into ionic template page
body: <p>I'm new in ionic but I would try convert my old app into this powerfull framework.
  I'll try to use google maps api into a template page loaded.</p>
  
  <p>this is my app.js</p>
  
  <pre><code>angular.module('starter', ['ionic', 'starter.controllers'])
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })
      .state('app.home', {
        url: "/home",
        views: {
          'menuContent' :{
            templateUrl: "templates/home.html"
          }
        }
      })
      .state('app.mappa', {
        url: "/mappa",
        views: {
          'menuContent' :{
            templateUrl: "templates/mappa.html",
            controller: 'MarkerRemoveCtrl'
          }
        }
      })
      .state('app.search', {
        url: "/search",
        views: {
          'menuContent' :{
            templateUrl: "templates/search.html"
          }
        }
      })
      .state('app.registrati', {
        url: "/registrati",
        views: {
          'menuContent' :{
            templateUrl: "templates/registrati.html"
          }
        }
      })
  
      .state('app.browse', {
        url: "/browse",
        views: {
          'menuContent' :{
            templateUrl: "templates/browse.html"
          }
        }
      })
      .state('app.playlists', {
        url: "/playlists",
        views: {
          'menuContent' :{
            templateUrl: "templates/playlists.html",
            controller: 'PlaylistsCtrl'
          }
        }
      })
      .state('app.single', {
        url: "/playlists/:playlistId",
        views: {
          'menuContent' :{
            templateUrl: "templates/playlist.html",
            controller: 'PlaylistCtrl'
          }
        }
      })
      .state('app.prova', {
        url: "/prova",
        views: {
          'menuContent' :{
            templateUrl: "templates/prova.html"
          }
        }
      });
    $urlRouterProvider.otherwise('/app/home');
  });
  </code></pre>
  
  <p>and this is my controller.js</p>
  
  <pre><code>    angular.module('starter.controllers', [])
  
  .controller('AppCtrl', function($scope, $ionicModal, $timeout) {
    $scope.loginData = {};
    $ionicModal.fromTemplateUrl('templates/login.html', {
  
    scope: $scope
    }).then(function(modal) {
      $scope.modal = modal;
    });
  
    $scope.closeLogin = function() {
      $scope.modal.hide();
    };
  
    $scope.login = function() {
      $scope.modal.show();
    };
  
    $scope.doLogin = function() {
      console.log('Eseguo la login', $scope.loginData);
  
      $timeout(function() {
        $scope.closeLogin();
      }, 1000);
    };
  })
  
  .controller('PlaylistsCtrl', function($scope) {
    $scope.playlists = [
      { title: 'Reggae', id: 1 },
      { title: 'Chill', id: 2 },
      { title: 'Dubstep', id: 3 },
      { title: 'Indie', id: 4 },
      { title: 'Rap', id: 5 },
      { title: 'Cowbell', id: 6 }
    ];
  })
  
  .controller('PlaylistCtrl', function($scope, $stateParams) {
  })
  
  .controller('MarkerRemoveCtrl', function($scope, $ionicLoading) {
    $scope.positions = [{
      lat: 43.07493,
      lng: -89.381388
    }];
    $scope.$on('mapInitialized', function(event, map) {
      $scope.map = map;
    });
    $scope.centerOnMe= function(){
    $scope.positions = [];
  
      $ionicLoading.show({
        template: 'Loading...'
      });
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        $scope.positions.push({lat: pos.k,lng: pos.B});
        console.log(pos);
        $scope.map.setCenter(pos);
        $ionicLoading.hide();
      });
    };
  });
  </code></pre>
  
  <p>and then this is my index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
  &lt;link href="css/app.css" rel="stylesheet"&gt;
  &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="starter"&gt;
  &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you understand I would that when i click on "mappa" button, I open mappa.html template and load the map!</p>
  
  <p>mappa.html</p>
  
  <pre><code>&lt;ion-view ng-controller="MarkerRemoveCtrl"&gt;
  &lt;ion-content scroll="false"&gt;
    &lt;div class="mapWrap"  data-tap-disabled="true"&gt;
      &lt;map center="43.07493,-89.381388" zoom="15"&gt;
        &lt;!-- ngRepeat: pos in positions --&gt;
        &lt;marker ng-repeat=" pos in positions" position="{{pos.lat}},{{pos.lng}}"&gt;&lt;/marker&gt;
      &lt;/map&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>But nothing happen!
  I'll try putting the mappa.html code into index, and all works fine!</p>
  
  <p>The question is:
  is possible to load maps in other template page, or only in main page?
  And how to?</p>
  
  <p><strong>UPDATE SOLUTION</strong></p>
  
  <p>Ok I solved my problem so just calling init()</p>
  
  <p>this is maps.html</p>
  
  <pre><code>&lt;ion-view title="MAPPA" ng-init="init()"&gt;
    &lt;ion-nav-bar class="bar-energized"&gt;&lt;/ion-nav-bar&gt;
    &lt;ion-content&gt;
      &lt;div id="map" data-tap-disabled="true"&gt;&lt;/div&gt;
    &lt;/ion-content&gt;
    &lt;ion-footer-bar class="bar-dark"&gt; &lt;a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"&gt;Dove mi trovo&lt;/a&gt; &lt;/ion-footer-bar&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>And this is the controller:</p>
  
  <pre><code>//MAPPE
  .controller('mapCtrl', function($scope, $ionicLoading, $compile) { 
        $scope.init = function() {
          var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
          var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map"),
              mapOptions);
  
          //Marker + infowindow + angularjs compiled ng-click
          var contentString = "&lt;div&gt;&lt;a ng-click='clickTest()'&gt;Clicca qui!&lt;/a&gt;&lt;/div&gt;";
          var compiled = $compile(contentString)($scope);
          var infowindow = new google.maps.InfoWindow({
            content: compiled[0]
          });
          var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Uluru (Ayers Rock)'
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });
          $scope.map = map;
      };
      // google.maps.event.addDomListener(window, 'load', initialize);
      $scope.centerOnMe = function() {
          if(!$scope.map) {return;}
  
          $scope.loading = $ionicLoading.show({
            content: 'Getting current location...',
            showBackdrop: false
          });
  
          navigator.geolocation.getCurrentPosition(function(pos) {
            $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            $scope.loading.hide();
          }, function(error) {
            alert('Unable to get location: ' + error.message);
          });
      };
      $scope.clickTest = function() {
          alert('Example of infowindow with ng-click')
      };
  })
  </code></pre>
  
  <p>For me work fine, and when clicking find correct position and show on the maps!
  thanks!</p>