Angular google maps error:- Uncaught Error: Google Maps API not available

Question

I am new in Ionic app development. I installed angular google maps using bower

bower install angularjs-google-maps

then added these ref files in index.html

<script src="lib/lodash/dist/lodash.js"></script>
<!-- ionic/angularjs js -->
<script src="cordova.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB52Z0xUP6JEX9fjr1EEQvCWgo8W4DD5CY&extension=.js"></script>

<script src="lib/angularjs-google-maps/dist/angularjs-google-maps.js"></script>

Finally added the gm module as a dependency to your AngularJS app:

angular.module('taskerApp', ['ionic', 'taskerApp.controllers', 'taskerApp.services', 'pickadate', 'gm'])

It is showing a blank screen and giving this error in console.

angularjs-google-maps.js:40 Uncaught Error: Google Maps API not available, please make sure the Google Maps library is loaded before the AngularJS Google Maps library is loaded

Please help me resolve this.

Iso · Accepted Answer · 2016-07-13 13:06:52Z

1

As per the docs:

Make sure to load the AngularJS library and the Google Maps API:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
Then load the AngularJS Google Maps library:
<script src="bower/angularjs-google-maps/dist/angularjs-google-maps.js"></script>
Finally add the gm module as a dependency to your AngularJS app:
angular.module('yourApp', ['gm']);
That's it! You can now start adding Google Maps directives to your markup.

My guess is you don’t include the files in the right order.

answered Jul 13, 2016 at 13:06

Iso

3,23825 silver badges31 bronze badges

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

1 Comment

Charu Over a year ago

Order as you can see is same as shown here but it helped me as a copy pasted "<script src="maps.googleapis.com/maps/api/…> " the problem causing the error was missing "libraries=places" in url

Collectives™ on Stack Overflow

Angular google maps error:- Uncaught Error: Google Maps API not available

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related