I am looking to incorporate markers on a map using coordinates stored in a Supabase database column.
Below is my Vue code:
<l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.position"></l-marker>
In the script:
export default {
async created() {
const { data: events, error } = await this.$supabase
.from('events')
.select('coordinates')
this.markers = events
this.loaded = true
console.log(this.markers)
},
data: () => ({
markers: [],
}),
}
When I output the markers, the result is:
[
{ "coordinates": "lat: 59.339025, lng: 18.065818" },
{ "coordinates": "lat: 59.923043, lng: 10.752839" }
]
The error message states: "latlng is Null"