wofficeMembersMap.js

(function() {
    Vue.component('woffice-members-map', {
        template: '<div id="woffice-members-map__content"></div>',
        props: ['url', 'height'],
        data: function () {
            return {
                loaded: false,
                mapObject: null,
                center: {
                    lat: 50.629250,
                    lng: 3.057256,
                },
                zoom: 10,
                members: []
            }
        },
        mounted: function() {

            this.createMap();

        },
        methods: {

            /**
             * Create the map and set the container's height according to the attribute
             */
            createMap: function() {

                var $map = $('#woffice-members-map__content');

                $map.height(this.height);

                this.mapObject = new google.maps.Map($map[0], {
                    center: {
                        lat: parseFloat(this.center.lat),
                        lng: parseFloat(this.center.lng)
                    },
                    zoom: this.zoom,
                });
            }

        }
    });


    new Vue({
        el: $('#woffice-members-map__wrapper')[0],
    });

})();