How to populate markers in vue2-google-maps

Question

I'm really new to the whole js and I don't know much of the code.This is the package : https://github.com/xkjyeah/vue-google-maps

And this has to be submitted next tomorrow. But here is what i've done so far. When i click on the button. I gotta show the markers in the map .

That is the result in my devtools after clicking on the button that has @click="showRoute"

 showRoute(){

this.fetchDeliveries() ;    


//I want then to populate the map with the marker with the given lat, lng in 
 the response
        }

on it and then

Answer 1

Not enough data, but here is a working example of component which populates markers with data from your coordinates object

<teplate>
  <gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">
    <gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" @closeclick="infoOpened=false">
    {{infoContent}}
    </gmap-info-window>
    <gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" @click="toggleInfo(item, key)" />
  </gmap-map>
</template>

<script>
export default {
  data: {
    startLocation: {
      lat: 10.3157,
      lng: 123.8854
    },
    coordinates: {
      0: {
        full_name: 'Erich  Kunze',
        lat: '10.31',
        lng: '123.89'
      },
      1: {
        full_name: 'Delmer Olson',
        lat: '10.32',
        lng: '123.89'
      }
    },
    infoPosition: null,
    infoContent: null,
    infoOpened: false,
    infoCurrentKey: null,
    infoOptions: {
      pixelOffset: {
        width: 0,
        height: -35
      }
    },
  },
  methods: {
    getPosition: function(marker) {
      return {
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng)
      }
    },
    toggleInfo: function(marker, key) {
      this.infoPosition = this.getPosition(marker)
      this.infoContent = marker.full_name
      if (this.infoCurrentKey == key) {
        this.infoOpened = !this.infoOpened
      } else {
        this.infoOpened = true
        this.infoCurrentKey = key
      }
    }
  }
}
</script>

Working fiddle https://jsfiddle.net/burlakko/kc8Ljejv/31/