Just dipping my toes into vueJS, currently working on an app that can plot locations on a google maps element. My code may be messy, but it's all part of the learning process for me. Any assistance is greatly appreciated.
Context
I have an array of geese objects:
[
{
"id": 74,
"created_at": "Jan 14 08:24:46 PM",
"latitude": "<a coord near me>",
"longitude": "<a coord near me>"
},
{
"id": 73,
"created_at": "Jan 14 06:56:33 PM",
"latitude": "<a coord near me>",
"longitude": "<a coord near me>"
}
]
Objective
The goal is to transform this array of geese objects into another array of markers, each containing only lat/long values, which I can then pass into google maps to display markers.
Challenges
The map itself displays properly, and obtaining the current location while centering works as intended.
Strangely, the markers array doesn't populate correctly upon initial page load. It only fills up when the webpack loader reloads the element or triggers within the "getMarkers()" method. Despite examining vue's lifecycle documentation, I haven't been able to rectify this issue.
Furthermore, even when the markers load successfully (verified through vue devtools chrome extension), they still fail to appear as markers in the application (although manual input of mock coordinates via vue devtools shows them).
My Code
<template>
<div>
<gmap-map :center="this.center" :zoom="15" style="width:100%; height: 400px;">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
></gmap-marker>
</gmap-map>
</div>
</template>
<script>
export default {
name: "GoogleMap",
props: {
geese: Array
},
data() {
return {
markers: [],
center: {}
};
},
methods: {
geolocate() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
},
getMarkers() {
console.log("in getMarkers")
for (var goose of this.geese) {
console.log("got into for loop of geese")
console.log("dsdfss")
const marker = {
lat: parseFloat(goose.latitude),
lng: parseFloat(goose.longitude)
};
this.markers.push({ position: marker });
}
}
},
mounted() {
this.geolocate();
this.getMarkers()
}
};
</script>
Once again, thank you for any guidance provided.