Angular-google-maps not showing - what am I doing wrong?

ionic-v1
1

Hello, I am trying to following the angular google maps tutorial to display a random map. The map object s not being drawn, and I am not seeing any script load errors either

Can someone tell me where I am going wrong?

app.js:
I’ve added 'uiGmapgoogle-maps' as a dependency in angular.module

index.html loading order:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
 <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src = "lib/angular-google-maps/dist/angular-google-maps.min.js"></script>
<script src = "lib/lodash/lodash.min.js"></script>

My whitelist content-security-policy:

    <meta http-equiv="Content-Security-Policy" content = "script-src 'self' 'unsafe-eval' https: 'unsafe-inline'">

My Maps Ctrl:

angular.module('zmApp.controllers').controller('zmApp.MapsCtrl', function ($scope,  $ionicSideMenuDelegate, $location) {
    $scope.openMenu = function () {
        $ionicSideMenuDelegate.toggleLeft();
    };
    $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }  
});

My Maps Template:

<ion-view view-title="Maps" cache="false">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
         <ion-content scroll="false">
             HELLO
     <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
    </ion-content>
</ion-view>
2

Take a look at the TrendCity demo app (from the book ‘Developing an Ionic Edge’) on GitHub: https://github.com/trendicity/trendicity

image

3

@robinyo,
Thanks for the link - to be honest, that is far too complicated for me to find out what is going wrong in my code.

But on the positive side, it was excellent in showing me how to write some nice directives and has given me ideas on how to further modularize my code

I found the error - it was a styling issue. The moment I specified a width/height in the .angular-google-map-container style, it showed up. For some reason, height:100% was not working.