谷歌地图错误 - 未捕获的 ReferenceError：未定义谷歌 - yeoman答案

【问题标题】：google map error - Uncaught ReferenceError: google is not defined - yeoman谷歌地图错误 - 未捕获的 ReferenceError：未定义谷歌 - yeoman
【发布时间】：2014-09-02 10:52:09
【问题描述】：

在 yeoman-ionic 框架上，我尝试将谷歌地图添加到我的应用程序中。问题是每次我运行 grunt serve 时，index.html 脚本都会被删除。所以我运行了这个：bower install --save angular-google-maps 并解决了问题，因为它在 index.html 之外的其他文件上编写了脚本。唯一的问题是当我再次运行 grunt serve 时，我遇到了一个不同的错误，从那以后我就无法弄清楚我做错了什么......

错误：

Uncaught ReferenceError: google is not defined

我认为它与一些业力配置文件有关，尽管我不知道这是什么。试图解决这个问题几个小时，但无法解决这个问题......

【问题讨论】：

标签： angularjs google-maps yeoman ionic-framework

【解决方案1】：

我也遇到了这个错误。原来这与我加载脚本文件的顺序有关。尝试按以下顺序加载脚本文件：

<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>

最好的！

【讨论】：

然后显示：您在此页面上多次包含 Google Maps API。这可能会导致意外错误。

【解决方案2】：

您必须使用 Google Maps SDK Async Loader。它保证 angular-google-maps 在所有 Google Maps SDK 完全准备好之前不会开始处理任何指令。

配置：

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

Google Maps SDK 什么时候准备好？：

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

你也可以阅读这个http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi

【讨论】：