Adding new marker but not updating existing marker position

[shashanktrivedi2018]

Hi I am able to add new markers but whenever a change happen in existing marker, it does not reflect over google map. I am unable to fix it. here is the sample code

  <gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" @closeclick="infoOpened=false">
    {{infoContent}}
  </gmap-info-window>

  <gmap-marker v-for="(item, key) in jsondata" :key="key" :position="getPosition(item)" :clickable="true"  @click="toggleInfo(item, key)" />

</gmap-map>

 <script src="vue-google-maps.js"></script>

[gautam-patadiya]

have you found any solution? I have the same problem

[shashanktrivedi2018]

I am not using vue for this, and completely came from vue syndrome. I am building up markers array, whenever new marker comes i search in existing marker array using es6 arrow find syntax (indeed fast). Lack of documentation forced me to switch to traditional route though i like its syntax very much.

[rcosta-gcare]

@shashanktrivedi2018 you could at least format your code so it's easier for us to read it

[shashanktrivedi2018]

<script>

Vue.use(VueGoogleMaps, { load: { key: 'Map_API_Key' }, }); ` let app_gmap = new Vue({ el: '#root', data: { startLocation: { lat: 20.3157, lng: 83.8854 }, jsondata: jsondata, infoPosition: null, infoContent: null, infoOpened: false, infoCurrentKey: null, infoOptions: { pixelOffset: { width: 0, height: -35 } },

methods: { getPosition: function(marker) { //alert(marker.gps.lat); return { lat: parseFloat(marker.gps.lat), lng: parseFloat(marker.gps.lng) } }, toggleInfo: function(marker, key) { this.infoPosition = this.getPosition(marker); this.infoContent = marker.CartID; if (this.infoCurrentKey == key) { this.infoOpened = !this.infoOpened; } else { this.infoOpened = true; this.infoCurrentKey = key; } } } });`

[shashanktrivedi2018]

I am building up jsondata array dynamically and pushing new element into it. I do not know how to change existing marker position, whenever i add new element(marker), it is shown on the google map but when existing marker (element) changes, i become help less how to update the existing marker object. Thanks alot.

[rcosta-gcare]

Try to use VueDevTools to see if the position of item is changing. https://github.com/vuejs/vue-devtools

[diegoazh]

@shashanktrivedi2018 can you please use the correct markdown to share your code? use three ```javascript and at the end of your code finish with ``` On the other hand, can you tell us if the answer of @rcosta-gcare helps you? if not please can you provide a small project on stackblitz or jsfiddle to reproduce this issue?

[djom202]

Hi,

I have a similar situation; in my map I have a maker and I need to move it dynamically or update the current position to a new one, but so far I can't do it, even if change the maker position data. If exist any workaround about that, please let me know.