How to reverse geocode properly with vue2-google-maps - vue.js

Question

This is the response returned by the server :
Using basic reverse geocoding provided by google
<script>
function geocodelatLng(){
var response = [
{
"address": "213 Marlon Forks\nSouth Corineland, HI 81723-1044",
"lat": "10.30431500",
"lng": "123.89035500"
},
{
"address": "1291 Stephania Road\nLake Dorotheastad, TN 82682-76",
"lat": "10.30309100",
"lng": "123.89154500"
},
{
"address": "20330 Schmeler Course Apt. 210\nNorth Ari, NV 70048",
"lat": "10.30356400",
"lng": "123.89964100"
}
] ;
return _.map(response,coords => {
// console.log(arr.index);
var geocoder = new google.maps.Geocoder;
var latLng = {
lat : parseFloat(coords.lat),
lng : parseFloat(coords.lng)
} ;
// for every lat,lng .
// console.log(latLng);
geocoder.geocode({'location': latLng},function (results,status){
if (status === 'OK') {
if (results[0]) {
console.log(results[0].formatted_address);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
}
this worked and it logs in the console 3 geocoded addresses. But when I use it with this package. It doesn't work this is my code.
geocodedAddress(){
let geocoder = new google.maps.Geocoder();
let theLocations = this.locations ;
return _.map(theLocations, addr => {
var geocoder = new google.maps.Geocoder();
var locationss = {
lat : parseFloat(addr.lat),
lng : parseFloat(addr.lng)
} ;
// var sampleLocation = { lat: 1.39, lng: 103.8 };
return new Promise(function(resolve, reject) {
geocoder.geocode({'location': locationss }, function(results, status){
if (status === 'OK') {
if (results[0]) {
return results[0].formatted_address;
} else {
console.log(status);
window.alert('No results found');
}
}
})
});
});
}
in my template :
<v-list-tile-content>
<v-list-tile-title v-text="geocodedAddress"></v-list-tile-title>
<v-list-tile-sub-title>{{ address.address }}</v-list-tile-sub-title>
</v-list-tile-content>
can you please help me what should i do with my code. Because I'm having a hard time with this .

Answer 1

geocodedAddress is async, you can't use it in HTML template.
You should create a data attribute (for example formatedAddresses) to store result from async request
data() {
return {
locations: [],
formatedAddresses: []
}
},
created() {
// for example, you can call it in created hooks
this.geocodedAddress()
},
methods: {
geocodedAddress() {
var self = this;
let geocoder = new google.maps.Geocoder();
let theLocations = this.locations ;
return Promise.all(_.map(theLocations, addr => {
var geocoder = new google.maps.Geocoder();
var locationss = {
lat : parseFloat(addr.lat),
lng : parseFloat(addr.lng)
} ;
// var sampleLocation = { lat: 1.39, lng: 103.8 };
return new Promise(function(resolve, reject) {
geocoder.geocode({'location': locationss }, function(results, status){
if (status === 'OK') {
if (results[0]) {
return results[0].formatted_address;
} else {
console.log(status);
window.alert('No results found');
return null
}
}
})
});
})).then(data => {
console.log(data)
this.formatedAddresses = data
})
}
}
and in template
<div v-for="address in formatedAddresses" :key="address">{{ address }}</div>