How to access Meteor Data in Vue `mounted()` method?

VueJS
1

I am using Meteor+Vue, I am trying to create my own Google Maps component since the Vue2 Google Maps library is not working for me.

I am following this tutorial on Medium, on how to create and use the component. The following is my component code:

<template>
    <div class="map-container">
        <div class="google-map" :id="mapName"></div>
    </div>
</template>

<script>
    import {Meteor} from 'meteor/meteor';
    import Visits from '../../api/visits/visits';

    export default {
        name: 'google-map',
        props: ['name'],
        data: function () {
            return {
                mapName: this.name + "-map",
                locations: []
            }
        },
        mounted: function () {
            const element = document.getElementById(this.mapName)
            const options = {
                zoom: 12,
                center: new google.maps.LatLng(9.005400, 38.763611),
                scrollwheel: false
            }
            const map = new google.maps.Map(element, options);

            console.log("Locations!");

            // My problem is here, the locations array is always empty
            this.locations.forEach((coord) => {
                const position = new google.maps.LatLng(coord.lat, coord.lng);
                const marker = new google.maps.Marker({
                    position,
                    map: this.map
                });

                this.markers.push(marker)
                this.map.fitBounds(this.bounds.extend(position))
            });
        },
        meteor: {
            $subscribe: {
                'visits': []
            },
            locations() {
                return Visits.find({}, {fields: {location: 1, createdAt: 1}, sort: {createdAt: -1}})
            }
        }
    };
</script>

In my mounted() method, the Meteor returned data is always empty. What am I doing wrong? How can I access the data so I can add markers to the map?

2

Did you try https://github.com/Akryum/vue-googlemaps ?

1 Like