AngularJS Google Maps API Async loading

Question

Hello I try to load the google maps api asynchronously in AngularJS following this link:http://angular-ui.github.io/angular-google-maps/#!/

I get the following error:

Error: [$injector:modulerr] Failed to instantiate module due to:
[$injector:modulerr] Failed to instantiate module RegisterClientModule  due to:
undefined is not an object (evaluating 'uiGmapGoogleMapApiProvider.configure')

my code(Please note: I just started with AngularJS 2-3 days ago, I guess my mistake is easy to fix once I fully understand why this is not working):

var module = angular.module('RegisterClientModule', [])
.config(['$routeProvider', function    config($routeProvider,uiGmapGoogleMapApiProvider) {
$routeProvider.when('/registerclient', {
    controller: 'RegisterClientController',
    templateUrl: '/scripts/modules/RegisterClientModule/registerClientView.html'
});
uiGmapGoogleMapApiProvider.configure({
    v: '3.17',
    libraries: 'weather,geometry,visualization'
});
}]);

module.controller('RegisterClientController', ['$scope', function($scope, uiGmapGoogleMapApi ) {
uiGmapGoogleMapApi.then(function(maps) {
    console.log("Google maps api loaded");
});
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
console.log("Google maps api provider:"+uiGmapGoogleMapApi );

}]);

Thanks for your help

Pankaj Parkar · Accepted Answer · 2015-05-07 20:35:42Z

0

You missed to include uiGmapgoogle-maps in you app module. That will make available the uiGmapGoogleMapApiProvider & all other API of Google map.

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

answered May 7, 2015 at 20:35

Pankaj Parkar

136k23 gold badges241 silver badges306 bronze badges

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

2 Comments

jjuser19jj Over a year ago

I have added it, actually when I don't try to load it async the module works just fine, the problem only occurs when I try to configure the module to load async.

Kyle Calica-St Over a year ago

ever find your answer? Having the same problem and i added the uiGmapgoogle-maps module

Collectives™ on Stack Overflow

AngularJS Google Maps API Async loading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related