VueJS 2 Google maps markers - not updating to API

VueJS 2 Google maps markers - not updating to API
0

#1

Hello everyone,

I am trying to make a map of meteorite landings from the NASA API that’s also a filtered list. I managed to get the map markers to show up with static data. The filtered list works fine, but the markers are not showing up. The documentations here, https://github.com/GuillaumeLeclerc/vue-google-maps, indicates a number is expected which we have for the latitudes and longitudes it seems. However, when I set the position like lat: meteorites.reclat, nothing shows up. I can’t seem to find anything online that’s like this. Any ideas? Here’s my code at this point:

<input v-model="search" placeholder="Search a meteorite">
  <p v-for="meteorite in filteredList">Name: {{ meteorite.name }}, Location: {{ meteorite.reclat }} latitude {{ meteorite.reclong }} longitude, Mass: {{meteorite.mass}} grams, Recorded: {{meteorite.year}}</p>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
		data() {
      return {
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {
            lat: 0,
            lng: 0
          }
        }],
          search: '',
          meteoriteList: []
      }
		},
    computed: {
      filteredList() {
        return this.meteoriteList.filter(meteorite => {
          return meteorite.name.toLowerCase().includes(this.search.toLowerCase())
        })
      }
    },
    created() {
      let vm = this
      axios.get('https://data.nasa.gov/resource/y77d-th95.json')
      .then(function (response) {
        vm.meteoriteList = response.data;
      // console.log(response);
       })
     .catch(function (error) {
      console.log(error);
     });
     }
}
</script>