Javascript GoogleMaps无效的回调参数

我的VueJS/Laravel应用程序没有像我预期的那样正确加载到GoogleMaps中。我不明白为什么不调用回调。该功能可用，应加载。你能帮助我吗？我没有发现我的错误。我还不希望看到地图，因为我在init中只有一个

consol.log

，但即使它也没有被调用。当我打开完整的google URL时，错误消息是：

Google Maps API服务器拒绝了您的请求。无效的请求。 无效的“回调”参数

GIS VUE

<template>
    <div id="map"></div>
</template>
<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],
        data: {
            test: 1
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap: function() {
                this.map = new google.maps.Map(document.getElementById('map'), {
                    center: { lat: 83.298, lng: 35.555},
                    scollwheel: false,
                    zoom: 4
                })
            }
        }
    }
</script>
#map {height:300px;width:500px;}

从“../mixins/GoogleMaps.js”导入谷歌地图；
导出默认值{
mixins:[谷歌地图]，
数据：{
测试：1
},
安装的（）{
this.initMap（）；
},
方法：{
initMap:function（）{
this.map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:83.298，lng:35.555}，
斯考尔维勒：错，
缩放：4
})
}
}
}
#地图{高度：300px；宽度：500px；}

更改

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>

到

请确保您的API密钥不是密钥；）

唯一的更改是将

async

和

defer

移动到API URL之外

const GISView = require('./components/GISView.vue');

window.Vue = Vue;
window.Event = new class {
  constructor() {
    this.Vue = new Vue();
  }

  fire(event, data = null) {
    this.Vue.$emit(event, data);
  }

  listen(event, callback) {
    this.Vue.$on(event, callback);
  }
};

var App = window.App = new Vue({
  el: '#app',
  components: {
    GISView: GISView
  },
  data: {},
  methods: {
    init: function() {
      console.log("OK");
    }
  }
});

<template>
    <div id="map"></div>
</template>
<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],
        data: {
            test: 1
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap: function() {
                this.map = new google.maps.Map(document.getElementById('map'), {
                    center: { lat: 83.298, lng: 35.555},
                    scollwheel: false,
                    zoom: 4
                })
            }
        }
    }
</script>
#map {height:300px;width:500px;}

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init" async defer ></script>