我的模板视图中没有显示角度的Google Maps？

问题描述

我使用的是Angular Google Maps，并遵循了网站上的配置以及步骤。 我没有收到任何错误，也没有在指令上加载任何地图。 代码如下：

控制者

app.controller('MapCtrl', [
    '$scope',
    'uiGmapGoogleMapApi',
    function($scope, uiGmapGoogleMapApi) {
        //Variables Decleration
        $scope.odorizerID = "";
        $scope.map = {
            center: {
                latitude: 45,
                longitude: -73
            },
            zoom: 8
        };
        //Function Decleration
        $scope.onMapClick = function(odorizerID) {

        }

        uiGmapGoogleMapApi.then(function(maps) {

        });

    }
]);

app.js

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    'uiGmapGoogleMapApiProvider',
    function($stateProvider, $urlRouterProvider, uiGmapGoogleMapApiProvider) {

        /**
         * Configuring the Google Map API.
         */
        uiGmapGoogleMapApiProvider.configure({
            //    key: 'your api key',
            v: '3.17',
            libraries: 'weather,geometry,visualization'
        });



        /*For any unmatched url, redirect to / */
        $urlRouterProvider.otherwise("/");
        /*For all the other states we would configure the $StateProvider*/
        $stateProvider
            .state('login', {
                url: "/",
                templateUrl: "/app/views/auth/login.html",
                controller: 'AuthCtrl'
            })
            .state('maps', {
                url: "/maps",
                templateUrl: "/app/views/maps/maps.html"
            })
            .state('performance', {
                url: "/performance/:ororizerID",
                templateUrl: "/app/views/details/performance.html",
                controller: "PerformanceCtrl"
            })
            .state('usage', {
                url: "/usage/:ororizerID",
                templateUrl: "/app/views/details/usage.html"
            });
    }
]);

maps.html

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

index.html

它包含在index.html中

<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>

请帮助我解决同样的问题。 地图根本不会加载。

我在视图中得到的输出是

<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-scope ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container"></div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>

style.css

<style type="text/css">
  .angular-google-map-container { height: 400px; width:800px;}
</style>