javascript - 无法初始化 Angular-Google-maps

Question

我正在尝试使用 angular-google-maps 启动谷歌地图 但是，尽管我已按照 quickstart 上的指南进行操作，但我遇到了这些错误页面

所以我用谷歌搜索错误，但什么也没得到，但我看到了一些类似的问题，并且是由 AdBlock 引起的，所以我使用隐身窗口再次测试，这些错误消失了，但谷歌地图仍然不在我的应用程序上

这是我的完整代码

ma​​ster.html(包含所有src)

<script type="text/javascript" src="/static/javascripts/lodash.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/satellizer/0.9.4/satellizer.min.js"></script>

<script type="text/javascript" src="/static/javascripts/angular-google-maps.js"></script>
<script type="text/javascript" src="/static/javascripts/loading-bar.js"></script>

app.js[angular.js]

var app = angular.module('app',['ngMaterial','ngSanitize','ngAnimate','satellizer','ngResource','ui.router','ngMessages','angular-loading-bar','uiGmapgoogle-maps']).
 config(['$stateProvider','$urlRouterProvider','$authProvider','$locationProvider','$mdThemingProvider','cfpLoadingBarProvider','uiGmapGoogleMapApiProvider', function($stateProvider,$urlRouterProvider,$authProvider,$locationProvider,$mdThemingProvider, cfpLoadingBarProvider, uiGmapGoogleMapApiProvider) {
     uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
     $stateProvider
  .state('home', {
    url: '/',
    templateUrl: '/static/views/index.html',
    controller: 'IndexCtrl'
  })
.
.
.

controller.js[angular.js]

angular.module('app').controller('IndexCtrl', [
  '$scope',
  '$http',
  '$rootScope',
  '$auth',
  'Account',
  'uiGmapGoogleMapApi',
  function ($scope, $http, $rootScope,$auth,Account,uiGmapGoogleMapApi) {

    uiGmapGoogleMapApi.then(function(maps) {
      $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };


    });
  }
]);

index.html

<div style="width:500px;height:500px;">
    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
    {{map.center}}  
    </div>

{{map.center}} 可以显示，但不能显示 map 。

Answer 1

您可能尚未启动基本的 GoogleMap API

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>