vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
--> starting at object with constructor 'ni'
| property 'gm_bindings_' -> object with constructor 'Object'
| property 'controlSize' -> object with constructor 'Object'
| ...
| property 'controlSize' -> object with constructor 'Object'
--- property 'qe' closes the circle"
found in
---> <GoogleMapLoader> at src/components/GoogleMapLoader.vue
<TravelMap> at src/components/TravelMap.vue
<VContent>
<VApp>
<App> at src/App.vue
<Root>
Not too sure whats going on here. I'm trying to use GoogleMapsApiLoader to make a wrapper for googles maps, but at the moment im just getting nothing on the page and the console log just says this.
This is the error I'm getting and it seems to be coming from the package but I'm not sure if my code is correct.
There isn't a lot of documentation I can find so some help would be great.
<template>
<div>
<div class='google-maps' ref='googleMap'></div>
<template v-if='Boolean(this.google) && Boolean(this.map)'>
<slot
:google='google'
:map='map'
/>
</template>
{{ this.$data }}
</div>
</template>
<script>
import GoogleMapApiLoader from 'google-maps-api-loader';
export default {
name: 'GoogleMapLoader',
props: {
mapConfig: Object,
apiKey: String,
},
data() {
return {
google: null,
map: null,
};
},
async mounted() {
const googleMapApi = await GoogleMapApiLoader({
apiKey: this.apiKey,
});
this.google = googleMapApi;
this.initializeMap();
},
methods: {
initializeMap() {
const mapContainer = this.$refs.googleMap;
this.map = new this.google.maps.Map(
mapContainer, this.mapConfig,
);
},
},
};
</script>
<style>
</style>