Question

0

219

Views

GoogleMaps API with VueJS and Laravel integration

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?

over 4 years ago · Santiago Trujillo

Answer question

0

219

GoogleMaps API with VueJS and Laravel integration

Find remote jobs

Andres GPT