google map error - Uncaught ReferenceError: google

Question

on the yeoman-ionic framework i've tried to add google map to my app.the problem was that every time i ran grunt serve the index.html scripts got deleted. so i've ran this:bower install --save angular-google-maps and the problem solved since it wrote the scripts on some other file in addition to index.html. the only problem is when i ran grunt serve againt i got a diffrent error and ever since then i just can't figure out what i am doing wrong...

the error:

Uncaught ReferenceError: google is not defined

i think it has something to do with some karma config file although i have no idea what this is. tried to solve this for a couple of hours and couldn't figure this out...

Answer 1

I was getting that error too. It turned out to be related to the order in which I loaded my script files. Try loading your script files in this 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 Google Maps SDK Async Loader. It guarantees that angular-google-maps does not begin processing any directives until all of the Google Maps SDK is fully ready.

Configure:

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

When is Google Maps 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.github.io/angular-google-maps/#!/api/GoogleMapApi