I want to integrate a map via GoogleMaps API in my Laravel app. Therefore I chose a setup like this:
HTML
(...)
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div id="app">
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&libraries=places,geometry&callback=app.init" async defer></script>
</body>
(...)
Javascript 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);
}
};
window.app = new Vue({
el: '#app',
components: {
GISView: GISView
},
data: {
},
methods: {
init: function() {
this.$broadcast('MapsApiLoaded');
}
}
});
When loading the page I find in the dev tools console the message:
Why is the function app.init not found, as I have set it up in my VUE instance?