Angular Google Maps Module doesn't load

Question

I just updated angular-google-maps via bower to 2.0.1 and added the dependencies required (bluebird,jquery,loadash). When I comment out google-maps, my app works just fine. So it has definitely something to do with angular-google-maps

bower.json dependencies:

"dependencies": {
    "angular-route": "~1.2.21",
    "angular-sanitize": "~1.2.21",
    "angular-strap": "~2.0.5",
    "angular-animate": "~1.2.21",
    "angular-resource": "~1.2.21",
    "underscore": "~1.6.0",
    "angular": "~1.2.21",
    "jquery": "~2.1.1",
    "bootstrap": "~3.2.0",
    "angular-bootstrap": "~0.11.0",
    "angular-google-maps": "~2.0.1"
  }

Here are the libs loaded:

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/lodash/dist/lodash.underscore.min.js"></script>
<script src="/bower_components/bluebird/js/browser/bluebird.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
<script src="/bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-translate/angular-translate.min.js"></script>
<script src="bower_components/angular-dialogs/angular-dialog.min.js"></script>
<script src="/bower_components/angular-i18n/angular-locale_de.js"></script>

Here I load my app:

  var app = angular.module('app', [
    'ngRoute',
    'ngSanitize',
    'ngResource',
    'ngAnimate',
    'google-maps', // when I take this out, my app works... 
    'angular-loading-bar',
    'ui.bootstrap',
    'ui.utils',
    'AppControllers',
    'AppFactories',
    'AppDirectives',
  ]);

app.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
        GoogleMapApi.configure({
            key: '*********',
            v: '3.17',
            libraries: 'weather,geometry,visualization'
        });
  }]);

The error message I get:

Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=...)
    at Error (native)
    at http://localhost:8000/bower_components/angular/angular.min.js:6:450
    at http://localhost:8000/bower_components/angular/angular.min.js:34:97
    at r (http://localhost:8000/bower_components/angular/angular.min.js:7:290)
    at e (http://localhost:8000/bower_components/angular/angular.min.js:33:207)
    at http://localhost:8000/bower_components/angular/angular.min.js:33:284
    at r (http://localhost:8000/bower_components/angular/angular.min.js:7:290)
    at e (http://localhost:8000/bower_components/angular/angular.min.js:33:207)
    at gc (http://localhost:8000/bower_components/angular/angular.min.js:36:309)
    at c (http://localhost:8000/bower_components/angular/angular.min.js:18:170

I really don't know what breaks the module, I have checked my bower links, updated all dependencies (bower update).

I have been at it to try and find the mistake, but without luck. Maybe someone can help me here. Thanks!

Mike Cluck · Accepted Answer · 2015-10-13 18:56:54Z

2

They changed module name so update it:

var app = angular.module('app', [
    'ngRoute',
    'ngSanitize',
    'ngResource',
    'ngAnimate',
    'google-maps'.ns(), // new namespace
    'angular-loading-bar',
    'ui.bootstrap',
    'ui.utils',
    'AppControllers',
    'AppFactories',
    'AppDirectives',
  ]);

as update in point 4. https://angular-ui.github.io/angular-google-maps/#!/use

edited Oct 13, 2015 at 18:56

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

answered Oct 19, 2014 at 16:35

Michal K.

1892 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toolkit Over a year ago

i read angular.module('myApplicationModule', ['uiGmapgoogle-maps']);

Aakash · Accepted Answer · 2015-10-13 09:53:09Z

0

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

answered Oct 13, 2015 at 9:53

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

Collectives™ on Stack Overflow

Angular Google Maps Module doesn't load

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related