Template For multi-page Ionic with menu

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">

  <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
  <script src="http://www.google.com/jsapi"></script>
  <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myApp">
    <ion-nav-view></ion-nav-view>
</body>
</html>

var mappingCallback = function(){
console.log("Maps loaded!");
};
angular.module('myApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "menu.html",
      controller: 'AppCtrl'
    })
    .state('app.home', {
      url: '/home',
      views: {
        'menuContent':{
          templateUrl: 'home.html',
          controller: 'HomeController'
        }
      }
    })
    .state('app.map', {
      url: '/map',
      views: {
        'menuContent':{
          templateUrl: 'map.html',
          controller: 'MapController'
        }
      }
    });
    $urlRouterProvider.otherwise('/app/home');
})
.controller('AppCtrl',function($scope, $rootScope, $http, $location) {
        $rootScope.loadGLoader =function(){
            if(!window.google||!window.google.loader){
console.log("loading gloader");
                $http.get("http://www.google.com/jsapi")
                .success(function(json){
                    var scriptElem = document.createElement('script');
                    document.getElementsByTagName('head')[0].appendChild(scriptElem);
                    scriptElem.text = json;
                    locations.loadGMaps();
                });
            }else{
                if(!window.google.maps||!window.google.maps){
console.log("no gmaps");
                    $rootScope.loadGMaps();
                }
            }
        };
        $rootScope.loadGMaps = function(){
            if(window.google&&window.google.loader&&window.google.maps===undefined){
console.log("loading gmaps");
                try{google.load("maps", "3.21", {callback: mappingCallback, other_params: "libraries=geometry&sensor=true&language=en"});}catch(e){}
            }
        };
})
.controller('HomeController',function($scope, $location) {
    $scope.title = "Home Page";
        $scope.$on('$ionicView.enter',function(){

console.log("Is google and google maps set up?")
            if(window.google){
console.log("google is");
                if(window.google.maps===undefined){
console.log("maps isn't...");
                    $scope.loadGMaps(); //then load the map
                }else{
console.log("maps is");
                }
            }else{
console.log("google isn't...");
                $scope.loadGLoader(); //then load maps, then load the map
            }
        });
})
.controller('MapController',function($scope, $location) {
    $scope.title = "Map Page";
        var loadMap = function(){
            var mapOptions = {
                center: new google.maps.LatLng(43.074174,-89.380915),
                streetViewControl: false,
                styles: [{featureType: "all",stylers: [{ saturation: -75 }]}],
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions: {position:google.maps.ControlPosition.TOP_CENTER},
                zoom: 16,
                zoomControl: true,
                zoomControlOptions: {position:google.maps.ControlPosition.RIGHT_BOTTOM,style:google.maps.ZoomControlStyle.SMALL}
            };
            $scope.map = new google.maps.Map(document.getElementById("map"),mapOptions);
        };

        $scope.$on('$ionicView.loaded',function(){
console.log("map page loaded - should only see me once???");
        })

        $scope.$on('$ionicView.enter',function(){

console.log("Is google, google maps and our map set up?")
            if(window.google){
console.log("google is");
                if(window.google.maps){
console.log("maps is");
                    if($scope.map===undefined){
console.log("loading our map now...");
                        loadMap();
                    }/*else{
                        goo
                    }*/
                }else{
console.log("maps isn't...");
                    $scope.loadGMaps(); //then load the map
                }
            }else{
console.log("google isn't...");
                $scope.loadGLoader(); //then load maps, then load the map
            }
        });
});

/* Styles go here */

#map,#mapContainer .scroll{height: 100%;}
#map{width: 100%;}

<ion-view title="{{title}}" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content>
        Hello, this is not the map page
    </ion-content>
    <div class="bar bar-footer bar-stable">
        <div class="title">
           Bam! A Footer!
        </div>
    </div>
</ion-view>

<ion-view title="{{title}}" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content id="mapContainer" class="has-header" has-bouncing="false">
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>

<ion-side-menus>
  <ion-pane ion-side-menu-content edge-drag-threshold="true">
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="left">
    <ion-content>
      <ion-list>
        <a class="item item-icon-right" href="#/app/home">
          Home
          <i class="icon ion-chevron-right"></i>
        </a>
        <a class="item item-icon-right" href="#/app/map">
          Map
          <i class="icon ion-chevron-right"></i>
        </a>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>