googleが定義されていないかGoogle Maps APIエラー：MissingKeyMapError

Question

ng-mapのコンポーネントを作成していますが、私はthisのチュートリアルに従っています。

<div class="content-pane" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{$ctrl.googleMapsUrl}}"> 
    <ng-map class="content-pane" center="41,-87" zoom="5"> 
    ... 
    </ng-map> 
</div> 

は私のコントローラでは、私は

var bounds = new google.maps.LatLngBounds(); 
for (var i = 0; i < this.positions.length; i++) { 
    var latlng = new google.maps.LatLng(this.positions[i][0], this.positions[i][1]); 
    bounds.extend(latlng); 
} 

のように、かなり普通のものをやっていると私はグーグルが定義されていないエラー

angular.js:13708 ReferenceError: google is not defined 
    at new app.component.controller (map.component.js:13) 
    at Object.invoke (angular.js:4709) 
    at $controllerInit (angular.js:10234) 
    at nodeLinkFn (angular.js:9147) 
    at angular.js:9553 
    at processQueue (angular.js:16170) 
    at angular.js:16186 
    at Scope.$eval (angular.js:17444) 
    at Scope.$digest (angular.js:17257) 
    at Scope.$apply (angular.js:17552) 

を取得しています私の周りGoogleで検索して見つけましたthisバグレポート。私の問題はかなり似ています。そして、私が問題を解決するチュートリアルとして使用している同じ例を使用することを提案します。しかし、この例では、必要なスクリプトを熱心に読み込むscript-tags-for-development.jsがあることを考慮して、この問題を解決するためにどのように役立つかを理解していません。 「GoogleマップAPIのエラーを：MissingKeyMapError」を

document.write([ 
    '<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>', 
... 

私はHTMLにこのスクリプトを追加し、問題が離れて行くが、別の問題が発生向かいます。これは論理的です。なぜなら、htmlのheadでapyのキーをハードコーディングしたくないからです。角度のアプリケーションで設定できるようにしたいのです。

'missing apy key'エラーを解決するには、遅延読み込みディレクティブを使用することを提案するtutorialがあり、私が開始したポイントに正確に達しました。

If you need to pass in an API key to the javascript, you can set a scope variable in your controller (e.g. $scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE";). This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers. 

<div map-lazy-load="https://maps.google.com/maps/api/js" 
    map-lazy-load-params=""> 
    <ng-map center="41,-87" zoom="3"></ng-map> 
</div> 

だから私は私の質問をこのように置く：サンザシは公式ND-マップのチュートリアル/例はGoogleマップAPIキーなしで動作していますか？そして、私は私のhtmlの頭のapiのキーをハードコードしないためにlazy-loadディレクティブを使用したいときに、どうすれば 'google not found'エラーを克服できますか？すべてはそれが必要として動作し、asyncを除去した後

<script src="https://maps.googleapis.com/maps/api/js?key=xxx" async defer></script> 

：

Answer 1

私の問題は、スクリプトのasync属性でした。

<div map-lazy-load="https://maps.google.com/maps/api/js" 
    map-lazy-load-params="{{googleMapsUrl}}"> 
    <ng-map center="41,-87" zoom="3"></ng-map> 
</div> 

https://github.com/allenhwkim/angularjs-google-maps#lazy-loading-of-google-maps-javascript