I have been working on displaying markers on a map. When I fetched the data, everything seemed fine in Vue DevTools. The `this.markers` property also contains the data. However, to my surprise, the values for `lat` and `lng` inside the markers are showing as null.
I'm not sure what I might be doing wrong here?
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 clarify things further, here is an image of the devtool:
https://i.stack.imgur.com/UlpAl.png
Although I can see the map, I'm unable to view the markers on it due to the empty lat and lng values.