Google map error - Not prepared ReferenceError: google not defined - yeoman

Question

on an ion-ion framework, I tried to add a google map to my application. The problem was that every time I ran grunt, the index.html service scripts were deleted. so I ran this: bower install --save angular -google-maps and the problem is resolved since she wrote the scripts in another file in addition to index.html. the only problem is when I ran grunt serve againt, I got a great error, and since then I just can’t understand what I'm doing wrong ...

error:

Unprepared ReferenceError: google undefined

I think this has something to do with some karma configuration file, although I have no idea what it is. tried to solve it for several hours and could not understand it ...

Answer 1

I also got this error. It turned out that it is related to the order in which I downloaded the script files. Try loading the script files in the following order:

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> <script src='/path/to/underscore[.min].js'></script> <script src='/path/to/lodash.underscore[.min].js'></script> <script src='/path/to/angular-google-maps[.min].js'></script> 

Best!

Answer 2

You must use the Google Maps SDK Async Loader. This ensures that angular -google-maps does not start processing any directives until the entire Google Maps SDK is completely ready.

Setup:

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

When is the Google SDK ready ??

  .controller("someController", function($scope, uiGmapGoogleMapApi) { uiGmapGoogleMapApi.then(function(maps) { // write your code here // (google is defined) }); }); 

Also you can read this http://angular-ui.imtqy.com/angular-google-maps/#!/api/GoogleMapApi