fetching the markers but lat & lng being null - vue.js

Admin 1
Viewed 481

I am trying to display markers on the map. I fetched the data without a problem seeing in vue dev tool. Also this.markers has the data as well. But inside my lat and lng is null

I am not sure the way I am doing is wrong? 

data(){
        return {
            markers: []

        }
    },
    computed: {
        articles(){
            return this.$store.getters.getArticles;
        }
    },
    watch: {
        articles(){
            this.buildMarkers();
            this.clearMarkers();
        }
    },
    methods: {
        clearMarkers(){
            for( var i = 0; i < this.markers.length; i++ ){
                this.markers[i].setMap( null );
            }
        },
        buildMarkers: function(){

            this.markers = [];

            for( var i = 0; i < this.articles.length; i++ ){

                var position = new google.maps.LatLng(this.articles[i].lat, this.articles[i].lng);
                console.log(position);

                var marker = new google.maps.Marker({
                    position: position,
                    map: this.map
                });

                this.markers.push(marker);
            }
        },
    },
    mounted(){
        this.map = new google.maps.Map(document.getElementById('article-map'), {
            center: {lat: this.latitude, lng: this.longitude},
            zoom: this.zoom
        });
        this.clearMarkers();
        this.buildMarkers();
    },

to make it more understandable this is the image of the devtool.

enter image description here

By the way I can see the map. Only problem is I can't see the markers on it because lat & lng being empty.

vuejs2 vue.js google-maps javascript
1 Answers

You have an array of markers, therefor the buildMarkers() function must have been executed, which would have added them to the map.

The map property of the marker opened up in the console has been set to null (removing it from the map), this implies that clearMarkers() has also executed.

I notice in your articles() watcher you first build then clear your markers. I think it should possibly read

articles(){
  this.clearMarkers();
  this.buildMarkers();
}
user_9170640
Related