Google maps api load/install fails in AngularJs app

Question

I am trying to use Google maps in Angularjs app as described here: http://angular-ui.github.io/angular-google-maps/#!/use

I followed all the steps but I am getting following error:

My index.html has scripts in following order:

<!-- ionic/angularjs js -->
<script src='lib/loadash/dist/lodash.js'></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/angular-cookies/angular-cookies.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-animate/angular-animate.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='lib/angular-google-maps/dist/angular-google-maps.min.js'></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

In my app.js I have configured it as follows:

swarmsApp.config(function($stateProvider, $urlRouterProvider, $httpProvider, uiGmapGoogleMapApiProvider) {

uiGmapGoogleMapApiProvider.configure({
    //    key: 'your api key',
    v: '3.20', //defaults to latest 3.X anyhow
    libraries: 'weather,geometry,visualization'
});

And in my controller:

.controller('FarmersCtrl', ['$scope','$http', 'uiGmapGoogleMapApi', function($scope, $http, uiGmapGoogleMapApi) {

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

What is going wrong?

UPDATE : this error was solved by including <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> before <script src='lib/angular-google-maps/dist/angular-google-maps.js'></script> However it looks like not recommended way.

This led to another error:

Sk. Tajbir · Accepted Answer · 2016-06-10 11:06:50Z

1

There is a missing library. I think you need lodash for angular google map. See the code snippet in your given library link:

<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular[.min].js'></script>
<script src='/path/to/angular-simple-logger/angular-simple-logger[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>

Include the library and try again. Thanks.

answered Jun 10, 2016 at 11:06

Sk. Tajbir

2902 silver badges9 bronze badges

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

6 Comments

Sk. Tajbir Over a year ago

Ohh did you added later. It was not there i guess. Usually underscore is not defined error caused by not including lodash in the application. Can you please check again whether that library loaded properly. Thanks.

Sk. Tajbir Over a year ago

from second error i looks like you need an api key. Get the map api key from google developer console and include it in the url and try again. Thanks.

Thinker Over a year ago

I created a key and added it in index.js as <script async defer src="maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap" type="text/javascript"></script>: MYKEY is actually a long string of value. Howeevr error still persists with one more error stating initmap is not a function

Sk. Tajbir Over a year ago

So now api key problem is solved. So now the error is showing because somehow your init map method is loading before the google map js loads. Can you load your init map code after google map loads its js. Let me know.

Thinker Over a year ago

Problem was solved like in the following way. Looks like lodash.js wasn't loaded properly as you mentioned, however don't know why! Thanks though!

|

Thinker · Accepted Answer · 2016-06-10 11:54:52Z

0

I referred this post: http://codepen.io/netsi1964/post/angularjs-google-maps-directive and replaced downloaded loadash in lib folder with

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

answered Jun 10, 2016 at 11:54

Thinker

5,39615 gold badges70 silver badges143 bronze badges

Collectives™ on Stack Overflow

Google maps api load/install fails in AngularJs app

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related