1

I decided it would be interesting to try and make a Vue app that would use Google Maps. I'm currently displaying markers based on elements in array.

My array starts with 2 default objects so my map displays 2 markers. I then added a button which pushes extra objects, however, these objects do not appear on the map. Vue reactivity is quite new to me so I assume I'm not doing something right.

<template>
    <div class="wrapper">
        <button @click='addMark'>Add</button>
        <GmapMap
            :center="center"
            :zoom="zoom"
            :map-type-id="map"
            style="width: 100%; height: 850px"
        >
        <GmapMarker
            v-for="marker in markers"
            :position="marker"
            :clickable="true"
            :draggable="true"
            @click="center=marker"
        />
        </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'
            }
        },
        methods: {
            addMark(){
                this.markers.push({lat: 42.150529, lng: 24.746479})
                console.log(this.markers)
            }
        }
    }
</script>
halfer
  • 19,824
  • 17
  • 99
  • 186
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • What happened to the `:key="index"` from [your other question](https://stackoverflow.com/questions/54208701/my-loop-creates-google-map-markers-but-it-fails-to-set-their-position-correctly)? – Phil Jan 16 '19 at 02:00
  • I decided to substitute it with v-for="marker in markers" since I wasn't really using the indexes. Does it play any role in this? I could bring it back. – Onyx Jan 16 '19 at 02:03
  • Yes, the special [`:key` attribute](https://vuejs.org/v2/guide/list.html#key) is very important. In fact, without it there should be an error in your console – Phil Jan 16 '19 at 02:08
  • Hmmm, I was indeed getting a warning. Well I did change it back to :key="index" v-for="(marker, index) in markers" – Onyx Jan 16 '19 at 02:10
  • Are the new markers showing now or is it still not working? – Phil Jan 16 '19 at 02:11
  • No, they do get inserted in the array but do not get shown. – Onyx Jan 16 '19 at 02:14
  • 1
    Oh wait, they do! – Onyx Jan 16 '19 at 02:16
  • @Bobimaru so, no longer a problem? – Phil Jan 16 '19 at 02:17
  • 1
    Yeah, it's working dandy now. So it was because I wasn't including :key="index" v-for="(marker, index) in markers"? – Onyx Jan 16 '19 at 02:18
  • If you want you could put your solution as answer so I can select it :) – Onyx Jan 16 '19 at 02:29
  • 1
    Nah, this one's a little too minor and since it's basically a regression on your previous question, we can just vote to close as _"no longer a problem"_ – Phil Jan 16 '19 at 02:29
  • 1
    As per clean-up suggestions from @Phil, I suggest closing this as a duplicate. There's two choices, I am going for: [My loop creates google map markers but it fails to set their position correctly so they do not get displayed. Hard coding the position works](https://stackoverflow.com/questions/54208701/my-loop-creates-google-map-markers-but-it-fails-to-set-their-position-correctly) – halfer Jan 15 '22 at 21:42

0 Answers0