My maps component initializes a Google map, adds markers based on props passed from the parent, and sets the correct bounds of the map. However, the markers are added through a computed property to make it reactive. Everything seems to be working fine, except that the addMarkers function within my computed properties does not evaluate when the page and component are loaded.
The strange thing is that when I open Vue Devtools and click on the maps component, addMarkers immediately evaluates and updates the map correctly.
Any assistance would be greatly appreciated :-)
<template lang="pug" >
div.google-map(id="results-map")
</template>
<script>
import Gmaps from 'gmaps';
export default {
name: 'maps',
props: {
results: {
type: Array,
required: true
}
},
data() {
return {
map: {},
bounds: {}
}
},
computed: {
addMarkers() {
this.results.forEach((result) => {
if (result.latitude && result.longitude) {
var marker = this.map.addMarker({
lat: result.latitude,
lng: result.longitude,
title: result.name,
infoWindow: {
content: result.name
}
});
}
this.bounds.extend(marker.position)
});
this.map.fitBounds(this.bounds)
}
},
mounted() {
this.map = new Gmaps({
div: '#results-map',
lat: 0,
lng: 0,
zoom: 15
});
this.bounds = new google.maps.LatLngBounds();
}
}
</script>