Google Mapがロードされていません - Angular JS

Question

Google Mapでアプリケーションを作成しようとしていますが、何か不足しているようです。

<div class="container-fluid" ng-app="mapApp" ng-controller="mapCtrl"> 
    <div class="row"> 
    <div class="container-fluid"> 
     <div class="row header"> 
     <ui-gmap-google-map center='map.center' zoom='map.zoom'>{{map}}</ui-gmap-google-map> 
     </div> 
    </div> 
    </div> 
</div> 

app.js：

'use strict'; 

// Declare app level module which depends on views, and components 
angular.module('mapApp', [ 
    'ngRoute' 
]).config(['locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
    $locationProvider.hashPrefix('!'); 

    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]); 
.config(function(uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
    key: 'key', 
    v: '3.20', //defaults to latest 3.X anyhow 
    libraries: 'weather,geometry,visualization' 
    }); 
}); 

controller.js：ここ

は私のコードです

app.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
    //make magic 
    uiGmapGoogleMapApi.then(function(maps) { 
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
    }); 
}); 

と私はスタイルを追加しました：

.angular-google-map-container { 
    height: 400px; } 

を

出力は式をうまく解析していないようですので、{{map}}しか受信しません。

私は一日を失って、これを理解しようとしています。それはおそらく私が逃した「小さな」ものです。 「キー」の下に正当なAPIキーがあることに注意してください。

ご協力ありがとうございます。

Answer 1

あなたはまた、uiGmapgoogle-mapsモジュールの依存関係を宣言し、その

angular.module('mapApp', [ 
    'uiGmapgoogle-maps', 
    'ngRoute' 
]) 

で

angular.module('mapApp', [ 
    'ngRoute' 
]) 

を交換する必要があります彼らはあまりにも固定されているされた後210

提供された例では、いくつかのタイプミスの問題があり、マップは除外

'use strict'; 
 

 
angular.module('mapApp', [ 
 
    'uiGmapgoogle-maps', 
 
    'ngRoute' 
 
]) 
 
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) { 
 
    //$locationProvider.hashPrefix('!'); 
 
    //$routeProvider.otherwise({ redirectTo: '/view1' }); 
 
}]) 
 
.config(function (uiGmapGoogleMapApiProvider) { 
 
    uiGmapGoogleMapApiProvider.configure({ 
 
    //key: '', 
 
    v: '3.20', //defaults to latest 3.X anyhow 
 
    libraries: 'weather,geometry,visualization' 
 
    }); 
 
}) 
 
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
 
    uiGmapGoogleMapApi.then(function(maps) { 
 
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
 
    }); 
 
});

.angular-google-map-container { 
 
    height: 400px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.1/lodash.js" type="text/javascript"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script> 
 
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script> 
 
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script> 
 

 
<div class="container-fluid" ng-app="mapApp" ng-controller="mapCtrl"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t \t <div class="row header"> 
 
\t \t \t \t \t <ui-gmap-google-map center='map.center' zoom='map.zoom'>{{map}}</ui-gmap-google-map> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div>

Answer 2

約束事の外に$ scope.mapを入れてください。現在の設定では、「角googleマップ：中心または境界のプロパティが必要です」というエラーが表示されます。

---

app.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
    $scope.map = {center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
}); 

作品plunkr - here - provide a API KEY