CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
Edgar
Edgar

Reputation: 1120

angular-google-maps module is not loading

I have problem, cannot find out why angular not see angular-google-maps

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=g4sMainModule&p1=Er…localhost%3A8080%2Fwebjars%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4458n @ angular.js:340g @ angular.js:4419eb @ angular.js:4344c @ angular.js:1676yc @ angular.js:1697Zd @ angular.js:1591(anonymous function) @ angular.js:29013j @ jquery.js:3099k.fireWith @ jquery.js:3211n.extend.ready @ jquery.js:3417I @ jquery.js:3433

html injected scripts (all are find and loaded)

    <script src="webjars/jquery/2.1.4/jquery.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular.min.js"></script>
<script src="webjars/lodash/4.0.0/lodash.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-route.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="webjars/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="webjars/angular-material/1.0.1/angular-material.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="webjars/angular-google-maps/2.2.1/angular-google-maps.js"></script>

using in module:

var module = angular.module('myModule', [ 'ngRoute','ngResource','uiGmapgoogle-maps', 'ngMaterial']);

if I remove uiGmapgoogle-maps error disapear.

Upvotes: 2

Views: 709

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

It could be related with one of the following reasons:

  • Unfortunately lodash 4 library replaced _.contains with _.includes function and that breaks at least version 2.2.1 of angular-google-maps.js More details could be found in this thread. Solution: you could use the previous version (3.10.1) since it is compatible with angular-google-maps library
  • angular-google-maps library (version 2.2.X) contains dependency to nemLogging module. Solution: add a reference to nemLogging library

Example

var app = angular.module('mapApp', ['ngRoute', 'ngResource', 'uiGmapgoogle-maps']);

app.controller('mapCtrl', function ($scope, uiGmapIsReady) {
    $scope.map = {
        center: {
            latitude: 55.711898,
            longitude: 9.5387363
        },
        zoom: 12,
        options: {
        },
        control: {}
    };
});
.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.2.1/dist/angular-google-maps.js"></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
      <ui-gmap-google-map id="map" center="map.center" pan="map.pan" zoom="map.zoom" draggable="true" refresh="map.refresh" options="map.options" events="map.events" bounds="map.bounds" dorebuildall="true">
      </ui-gmap-google-map>
 </div>

Upvotes: 3

Related Questions