https://i.sstatic.net/MbM9f.png
I've been working on a nuxt project where I'm currently in the process of creating a map component using Google Maps with the help of the plugin https://www.npmjs.com/package/vue2-google-maps. After installing the plugin via npm, I started integrating it into my index.html page. The code snippet from my page looks like this:
<template>
<div>
<br>
<br>
<Card/>
<br>
<br>
<br>
<br>
<!-- <Googlemap/> -->
<Panel/>
<Four/>
</div>
</template>
<script>
import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
export default {
components: {
Panel,
Card
}
}
</script>
However, when I tried to uncomment the lines related to Googlemap, I encountered an error as shown in the screenshot provided.
The Googlemap component code is as follows:
<template>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
</template>
<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "MYTOKEN",
libraries: "places"
}
});
export default {
}
</script>
<style>
</style>
I'm currently stuck and unsure of what I might be doing wrong. Any guidance or suggestions would be greatly appreciated.
edit: