My component successfully:
- Receives a string from a sibling input component via the global Bus method in
created()=> works - Manipulates the string into lat/lng coordinates via
geoDecoding()=> works - Resolves promise result coordinates, sets data, also via
geoDecoding()=> works - Attempts to refresh
showMap()with changed data after an event is fired => does not work :(
Please note that I have props (commented out) with hardcoded defaults just to check
showMap()with those values, and it works.
- I have set a debugger on
showMap()and noticed that latitude and longitude are not set, even though I set them undercreated()when invokinggeoDecoding()
I would like showMap() to refresh every time an event is fired, receiving refreshed data from this.latLong.latitude / this.latLong.longitude to correctly instantiate the map according to those new values. Currently, with this code instance, showMap() instantiates a map but remains empty because it's not receiving the lat/lng from geoDecoding().
Code:
<template>
<div class="map-container" :id="theMap"></div>
</template>
<script>
import { Bus } from "../main";
export default {
name: "GoogleMapsContainer",
data() {
return {
theMap: "map-for-" + this.name,
location: '',
latLong: {
latitude: '',
longitude: ''
},
}
},
props: {
name,
// 'latitude': {
// type: Number,
// default: function () {
// return 39.50
// }
// },
// 'longitude': {
// type: Number,
// default: function () {
// return -98.35
// }
// },
// 'zoom': {
// type: Number,
// default: function () {
// return 4
// }
// }
},
methods: {
showMap() {
debugger;
this.map = new google.maps.Map(document.getElementById(this.theMap), {
center: {lat: this.latLong.latitude, lng: this.latLong.longitude},
zoom: this.zoom
});
},
geoDecoding() {
let geocoder = new google.maps.Geocoder();
let theLocation = this.location;
let latLong = this.latLong;
return new Promise(function (resolve, reject) {
geocoder.geocode({'address': (theLocation ? theLocation : 'canada')}, function (results, status) {
console.log(results);
if (status === google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry.location.lat(), results[0].geometry.location.lng());
latLong.latitude = results[0].geometry.location.lat();
latLong.longitude = results[0].geometry.location.lng();
} else {
reject(status);
}
});
});
}
},
mounted() {
//this.geoDecoding();
this.showMap();
},
created() {
this.geoDecoding();
Bus.$on('passLocation', (input) => {
this.location = input;
this.geoDecoding();
});
},
}
</script>
<style scoped>
.map-container {
width: 80vw;
margin: 5vh auto;
height: 50vh;
background: fuchsia;
}
</style>