Can't get google map to appear

ionic-v1
1

I’m attempting to display a google map in an Ionic app. I can create
the map object, but I cant seem to make it display in the application
page. The result is the in map.html with no visible google map in it.
The $scope.centerOnMe() function also seems be working, but with no map
to display, its useless.

I used the ionic sidemenu as a base for my project, and used code based on this repository (https://github.com/driftyco/ionic-starter-maps) to create a google map in one of the pages.

Here is my code:
index.html:

    <html>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/itemCard.js"></script>
<!--<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>-->


<!-- GOOGLE MAPS -->
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=[myKey]0Q&sensor=true"></script>

  </head>

  <body ng-app="starter">

    <ion-nav-view></ion-nav-view>
  </body>
</html>

**js/directives.js**

    angular.module('starter.directives', [])
    
    .directive('map', function() {
      return {
        restrict: 'E',
        scope: {
          onCreate: '&'
        },
        link: function ($scope, $element, $attr) {
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(43.07493, -89.381388),
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map($element[0], mapOptions);
    
            $scope.onCreate({map: map});
    
            // Stop the side bar from dragging when mousedown/tapdown on the map
            google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
              e.preventDefault();
              return false;
            });
          }
    
          if (document.readyState === "complete") {
            initialize();
          } else {
            google.maps.event.addDomListener(window, 'load', initialize);
          }
        }
      }
    });

and controllers.js

        .controller('MapCtrl', function($scope, $ionicLoading, $compile, StoreService) {

  $scope.mapCreated = function(map) {
    console.log("Creating");
    $scope.map = map;
    console.log($scope.map);
  };

  $scope.centerOnMe = function () {
    console.log("Centering");
    if (!$scope.map) {

      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function (pos) {
      console.log('Got pos', 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);
    });
  };

})

and controllers.js:

    .controller('MapCtrl', function($scope, $ionicLoading, $compile, StoreService) {

  $scope.mapCreated = function(map) {
    console.log("Creating");
    $scope.map = map;
    console.log($scope.map);
  };

  $scope.centerOnMe = function () {
    console.log("Centering");
    if (!$scope.map) {

      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function (pos) {
      console.log('Got pos', 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);
    });
  };

})

map.html:

  <ion-content>
    <!--<div id="map" data-tap-disabled="true">Map</div>-->
    <map on-create="mapCreated(map)"></map>
    <div>
      <button class="button button-clear" ng-click="alert()">X</button>
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </div>

  </ion-content>
</ion-view>

and finally style.css

map {
width: 100%;
height: 100%;
margin: 100px;
}

What should be noted here is that in controller.js, the
$scope.mapcreated(map) function logs the map object. (You don’t need to
see the whole object, but it shows that the object has been created, and
can be added to the page) Here is the result:

_e3

Object { resize={...},  zoom_changed={...},  streetview_changed={...},  more...}

__gm

Oi { ca=map,  Sf=tg,  S=rg,  more...}

center

rf { A=43.07493,  F=-89.38138800000002,  toString=function(),  more...}

controls

[undefined, rg { j=[0],  gm_accessors_={...},  length=0,  more...}, rg { j=[0],  gm_accessors_={...},  length=0,  more...}, 11 more...]

data

ei { gm_accessors_={...},  map=Sk,  gm_bindings_={...},  more...}

features

T { gm_accessors_={...},  gm_bindings_={...},  get=function(),  more...}

gm_accessors_

Object { bounds={...},  projection={...},  svClient={...},  more...}

gm_bindings_

Object { reportErrorControl={...},  center={...},  zoom={...},  more...}

mapTypeId

"roadmap"

mapTypes

jh { gm_accessors_={...},  roadmap=GE,  gm_bindings_={...},  more...}

mapUrl

"https://maps.google.com/...S&gl=US&mapclient=apiv3"

overlayMapTypes

rg { j=[0],  gm_accessors_={...},  length=0,  more...}

streetView

Mi { __gm=T,  controls=[14],  A=false,  more...}

tilt

0

tosUrl

"https://www.google.com/i...US/help/terms_maps.html"

zoom

16

constructor

Sk(a, b)

addListener

function(a, b)

bindTo

function(a, b, c, d)

changed

function()

fitBounds

function(a)

get

function(a)

getBounds

function()

getCenter

function()

getDiv

function()

getHeading

function()

getMapTypeId

function()

getProjection

function()

getStreetView

function()

getTilt

function()

getZoom

function()

notify
etc.