google map error - Uncaught ReferenceError: google is not defined - yeoman

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

Answer 1

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

Answer 2

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!