2017-07-12 2 views
1

私は動作する角のGoogleマップを取得しようとしていますが、これらのエラーが発生しています。エラーを返す角のあるgoogleのマップ

angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/ $injector/modulerr?

上記のエラーは約半ページほど続きます。

https://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=29.10&action=apiboot2&e=10_1_0,10_2_0&rt=main.31 net::ERR_BLOCKED_BY_CLIENT

index.htmlを

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
    html, 
    body { 
     height: 100%; 
    } 

    .angular-google-map-container { 
     height: 100vh; 
    } 
</style> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/ 
angular.min.js"></script> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"> 
</script> 
<script src="./node_modules/angular-google-maps/dist/angular-google- 
maps.js"></script> 
<script src="./map.controller.js"></script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBL3uzNfWSpztGvmqhBLf- 
gYdfdxrCSOQo"> 
</script> 
</head> 

<body> 
<div ng-app="myApp" ng-controller="gMap"> 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' aria- 
    label="Google map"> 

     <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" 
     options="marker.options" events="marker.events" idkey="marker.id"> 
      <ui-gmap-window> 
       <div>{{marker.window.title}}</div> 
      </ui-gmap-window> 
     </ui-gmap-marker> 

    </ui-gmap-google-map> 
</div> 
</body> 

</html> 

アプリとコントローラ

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']); 

myApp.factory("Markers", function(){ 
    var Markers = [ 
    { 
    "id": "0", 
    "coords": { 
    "latitude": "45.5200", 
    "longitude": "-122.6819" 
    }, 
    "window": { 
    "title": "Portland, OR" 
    } 
}, 
{ 
    "id": "1", 
    "coords": { 
    "latitude": "40.7903", 
    "longitude": "-73.9597" 
    }, 
    "window" : { 
    "title": "Manhattan New York, NY" 
    } 
} 
]; 
return Markers; 
}); 

myApp.controller("gMap",function($scope,Markers){ 
    $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
}; 
$scope.markers = Markers; 
}); 

誰かが私はこの問題を解決する助けてくださいことはできますか?

+0

モジュールがありません。このモジュールは、角度が生成するエラーURLに存在する必要があります。この場合、このモジュールは明らかではありません。あなたenitreエラーを投稿する可能性があります。 –

答えて

1

Markers factoryの実装を修正する必要があります。factoryはオブジェクトを返す必要があります。

だから、同じようにそれを変更する:消費、あなたのgMap controllerで次に

myApp.factory("Markers", function(){ 
    var Markers = [ 
    { 
    "id": "0", 
    "coords": { 
    "latitude": "45.5200", 
    "longitude": "-122.6819" 
    }, 
    "window": { 
    "title": "Portland, OR" 
    } 
}, 
{ 
    "id": "1", 
    "coords": { 
    "latitude": "40.7903", 
    "longitude": "-73.9597" 
    }, 
    "window" : { 
    "title": "Manhattan New York, NY" 
    } 
} 
]; 
return { 
    markers: Markers 
    }; 
}); 

工場の配列のように:

$scope.markers = Markers.markers; 

アップデート:また、それ以来angular-simple-logger.jsライブラリをインポートする必要が

googlemap apiに依存しています。これを参照してくださいfiidle

+0

私はあなたが言ったことを試しましたが、私はまだ同じエラーが発生します:/私は何をしようとしていても私はこの巨大なinjector.modulerのエラーを取得していますか?私は何をすべきか完全に失われています –

+0

@kashifroshen:googlemap apiは ' angle-simple-logger.js'ライブラリもインポートする必要があります。この[fiddle](http://jsfiddle.net/k5nrf4eb/)を見て私の答えを更新しました。 – anoop

+1

あなたは救命士の人です。何百万もの人が、今はロード中です。質問があります。私のapiキーにgoogle map apiスクリプトタグを含めると、「Google Maps APIを複数回予期しないエラーが発生する可能性があります。それを含めるべきか、または十分に含まれているスクリプトタグですか? –

関連する問題