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>