こんにちは、ユーザーがリンクをクリックしたときに Google マップをページにロードしようとしています。angularjs と angular ui を使用して Google マップを使用しようとしましたが、マップが表示されません。ローカルホストで、私が得るエラーは次のとおりです。モジュール:マップテストはありません。ここにモジュールがないことは何を意味しますか? 私はそのようなエラーに遭遇し続けます。何らかの理由で JSfiddle で動作します... The working example .
HTML ファイル:
<div ng-app='maptesting'>
<div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap"
style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid"
ui-options="mapOptions"
ui-event="{'map-idle' : 'onMapIdle()'}"
>
</div>
<!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'markerClicked(marker)'}">
</div>
</div>
</div>
JavaScript ファイル:
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
var ll = new google.maps.LatLng(13.0810, 80.2740);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
実際の例: plunker の場合: here
JSfiddle の場合: here . 別の注意として、angularuiを使用して最初から、またはangularでGoogleマップを
使用して、Googleマップとangularjsの統合をコーディングする方が良いでしょうか? anuglarui は見栄えがしますが、試してみるとうまくいきませんでした。Google サークルで、しばらく更新されていないことを読んだため、うまく機能していない可能性があります。
回答: はい、私が見逃していたのはスクリプト タグだけでした。すなわち:
<script src="http://www.flocations.com/static/vendor/angular-ui/event/event.js"></script>
<script src="http://www.flocations.com/static/vendor/angular-ui/map/ui-map.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>