Due to certain reasons, I find myself having to utilize new google.maps.Marker() with vue2-google-maps, but I'm unsure of where to begin as most documentation and tutorials use <GmapMarker ... /> in the HTML section instead.
I've attempted to search for a solution, but unfortunately, the available resources do not address this specific scenario.
Currently, my code appears like this - it runs without any errors, yet the expected outcome is not achieved (the map displays but the marker remains invisible):
<template>
<div style="height: 100%; width: 100%;">
<GmapMap
:center="{ lat: 0, lng: 0 }"
ref="mapRef"
>
</GmapMap>
</div>
</template>
<script>
import * as VueGoogleMaps from 'vue2-google-maps';
export default {
computed: {
google: VueGoogleMaps.gmapApi,
},
methods: {
init() {
new this.google.maps.Marker({
position: {
lat: 0,
lng: 0
},
map: this.$refs.mapRef,
});
}
},
async mounted() {
this.init()
},
}
</script>