Javascript 谷歌地图不是'；t荷载-角荷载

我正试图用谷歌地图制作一个应用程序，然而，我似乎遗漏了一些东西

这是我的密码：

<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>

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}

我浪费了整整一天的时间，想弄明白这件事。。这可能是我错过的“小”东西。请注意，在“key”下有一个合法的API密钥

请帮忙，谢谢

将$scope.map置于控制器中的承诺之外。使用当前设置，您应该会得到一个eror——“角度谷歌地图：需要中心或边界属性”

---

---

一个有效的plunkr-

您还需要声明对

uigmapGoogleMaps

模块的依赖关系，因此替换

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

与

在所提供的示例中有一些打字错误问题，一旦它们也被修复，地图应该作为例外加载

“严格使用”；
角度模块（'mapApp'[
“uiGmapgoogle地图”，
“ngRoute”
])
.config（['$locationProvider'，'$routeProvider'，函数（$locationProvider，$routeProvider）{
//$locationProvider.hashPrefix（“！”）；
//$routeProvider.Others（{重定向到：'/view1'}）；
}])
.config（函数（uiGmapGoogleMapApiProvider）{
uiGmapGoogleMapApiProvider.configure({
//键：“”，
v:'3.20'，//默认为最新的3.X
库：“天气、几何、可视化”
});
})
.controller（'mapCtrl'，函数（$scope，uiGmapGoogleMapApi）{
uiGmapGoogleMapApi.then（函数（映射）{
$scope.map={中心：{纬度：45，经度：-73}，缩放：8}；
});
});
.angular谷歌地图容器{
高度：400px；
}

{{map}}

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

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

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