There seems to be an issue with displaying Google map markers based on objects in the markers array after looping through it. I noticed that when creating a second component and setting the position manually, the marker appears correctly. However, upon inspecting the components created using the loop, their position is set to undefined even though it was initially set to m.position. Any thoughts on why this might be happening?
<template>
<div class="wrapper">
<GmapMap
:center="center"
:zoom="zoom"
:map-type-id="map"
style="width: 100%; height: 850px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
</div>
</template>
<script>
export default {
data: function() {
return {
images: [],
markers: [{lat: 42.150527, lng: 24.746477}, {lat: 42.160527, lng: 24.796477}],
center: {lat: 42.150527, lng: 24.746477},
zoom: 15,
map: 'roadmap'
}
}
}
</script>
When I hardcoded a GmapMarker using the following code snippet, it displayed as expected.
<GmapMarker
:position="{lat: 42.150527, lng: 24.746477}"
:clickable="true"
:draggable="true"
@click="center={lat: 42.150527, lng: 24.746477}"
/>