1
角度のあるGoogleマップを実行するには、以下のコードが必要ですが、地図は表示されません。 Chromeの＃my-mapコンポーネントを見ると0x0pxと表示され、CSSと動的高さの宣言にもかかわらず変更できませんでした。それはうまく動作しているように見えますが、コンソールエラーはなく、appMapsモジュールは少なくとも正しく初期化されています。角度のあるGoogleマップには何も表示されません
<!DOCTYPE html>
html>
<head>
<title>New Map</title>
<style>
html, body {
height: 2000px;
width: 100%;
margin: 0;
padding: 0;
}
.angular-google-map-container { height: 400px; }
</style>
<script src="lodash/lodash.js"></script>
<script src="angular/angular.js"></script>
<script src="angular-google-maps/dist/angular-google-maps.js"></script>
<script>
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'My Key Is Entered Here',
v: '3.20',
libraries: 'weather,geometry,visualization'
});
});
appMaps.controller('mainCtrl', function($scope) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
$scope.$on('$viewContentLoaded', function() {
var mapHeight = 400; // or any other calculated value
$("#my-map .angular-google-map-container").height(mapHeight);
});
});
</script>
</head>
<body>
<h1>TEST</h1>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map>
</div>
</body>
</html>
編集：ルーは正しかったので、うん、角度の後にトップと角度-シンプルなロガーで（キー付き）GoogleマップAPIスクリプトを追加し、それはかなり近い私をリードしています。次に、ng-app = "appMaps"をbody要素に追加する必要がありました（私は一般的に角張っています）。ありがとう！
また、angle-simple-logger.jsをインストールし、ヘッダーに参照する必要があります。このライブラリは必須です。 （しかし、問題があれば、コンソールエラーが発生すると思います）。 また、HTMLタグ内の '<'を見逃してしまったことがあります（または、コピー貼りだけです） – Roux