when user get close to some area on map, display specific data from one other function? I am calculating average of each area estate prices in computed functions. it's below. you can see the average function on jsfiddle...
Already displaying averages but, what I need to do here, when user get zoomed in that region/city then display that areas average... The original code with map down below...
For example, how to sets bounds and connect those bounds to average function??? Thank you for helping.!
code updated!
data() {
return {
avg:"",
map: {},
mapName: "map",
estates: [],
},
mounted() {
axios.get('/ajax').then((response) => {
this.estates = response.data
});
this.initMap();
},
methods: {
initMap: function(){
var mapOptions =
{
zoom : 6,
center : {
lat:34.652500,
lng:135.506302
}
};
this.map = new google.maps.Map(document.getElementById(this.mapName), mapOptions);
google.maps.event.addListener(this.map, 'bounds_changed', function() {
console.log("bound changed alert");
});
},
avgArray: function (region) {
const sum = arr => arr.reduce((a,c) => (a += c),0);
const avg = arr => sum(arr) / arr.length;
return avg(region);
},
},
computed: {
groupedPricesByRegion () {
return this.estates.reduce((acc, obj) => {
var key = obj.region;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj.m2_price);
return acc;
}, {});
},
averagesByRegion () {
let arr = [];
Object.entries(this.groupedPricesByRegion)
.forEach(([key, value]) => {
arr.push({ [key]: Math.round(this.avgArray(value)) });
});
return arr;
},
},