Using Geocorder result in other function in VUe - google-maps

Question

i try to use the result of Geocode Lag Long, but i can't use out of the function. How can i use the result in other function in Vue?
Why i can't use "this.markerCoordinates" in other functions?
getLocation : function (address){
const element = document.getElementById(this.mapName);
var local;
// geocoder API (pega o endereço)
var geocoder = new google.maps.Geocoder(address);
geocoder.geocode({ 'address': address}, function (results, status){
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
// I WANT USE THIS IN OHTER FUNCTION
this.markerCoordinates = [{"latitude" :latitude , "longitude" : longitude}]
callback( this.markerCoordinates[0])
}
var mapCentre = this.markerCoordinates[0]
var options = {
zoom : 16,
center: new google.maps.LatLng(mapCentre.latitude , mapCentre.longitude)
}
this.options = options;
this.map = new google.maps.Map(element, options);
this.markerCoordinates.forEach((coord) => {
const position = new google.maps.LatLng(coord.latitude, coord.longitude);
const marker = new google.maps.Marker({
position,
map: this.map
});
});
});
},
in other functions is return undefined

Answer 1

Define a data element for your coordinates in your component, see here for an example: data() {return { markerCoordinates: undefined } }
In your getLocation function, you need a closure that points to the enclosing Vue instance , like this let vm = this. See here, e.g.
In the callback, use this variable to access the data element: vm.markerCoordinates = [{"latitude" :latitude , "longitude" : longitude}]
Access the it in the template simply by using markerCoordinates and in other methods of your component with this.markerCoordinates