I'm working on a Map.vue component and I need to update its data in Vue.js. However, I'm struggling to figure out how to do this:
<template>
<div>
<div class="google-map" :id="mapName">
</div>
</div>
</template>
<script>
export default {
name: 'google-map',
props: ['name'],
methods:{
updateCurrentPosition(){
navigator.geolocation.getCurrentPosition((position) => {
this.$data.currentLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log("After setting, This.currentLocation = ");
console.log(this.$data.currentLocation);
this.map.panTo(new google.maps.LatLng(this.$data.currentLocation.lat, this.$data.currentLocation.lng));
this.map.setZoom(18);
});
},
initializeMap(){
this.updateCurrentPosition();
console.log("Before Marker, This.currentLocation = ");
console.log(this.$data.currentLocation);
this.addMarker(this.$data.currentLocation);
},
addMarker(LatLngObj){
console.log("In addMarker This.currentLocation = ");
console.log(this.$data.currentLocation);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LatLngObj.lat, LatLngObj.lng),
map:this.map,
icon:'http://www.magic-emoji.com/emoji/images/619_emoji_iphone_ok_hand_sign.png'
});
}
},
data: function () {
return {
mapName: this.name + "-map",
markerCoordinates: [{
latitude: 51.501527,
longitude: -0.1921837
}, {
latitude: 51.505874,
longitude: -0.1838486
}, {
latitude: 51.4998973,
longitude: -0.202432
}],
map: null,
bounds: null,
markers: [],
currentLocation:{}
}
},
Although this.$data.currentLocation is correctly set in updateCurentPosition(), it appears as a blank object outside of that function. How can I ensure its value remains accessible from other functions?