Currently, I am in the process of configuring my Vuex store to hold an array of Marker objects from the Google Maps Javascript API. Here is a snippet of how my createStore function appears:
import { createStore } from "vuex";
export default createStore({
state: {
GCPMarkers: {
basemapMarkers: [new google.maps.Marker()],
mosaicMarkers: [new google.maps.Marker()],
},
},
// other properties
});
The initialization of the Google Maps Javascript API takes place within a Vue component named Map on my Home page:
// Inside Map.vue
mounted() {
const loader = new Loader({
apiKey: "my key",
version: "weekly",
});
loader
.load()
.then(this.initMap)
.catch((e) => console.log(e));
},
In addition, my main.ts file looks like this:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App).use(store).use(router).mount("#app");
Upon running my application, an error message regarding
basemapMarkers: [new google.maps.Marker()],Uncaught ReferenceError: google is not defined
I understand that this issue arises due to the fact that the google object has not been loaded at the time when the
import store from "./store"One possible resolution I thought of involves transferring the loader code to my main.ts file so that until the promise returned by loader is fulfilled, the importation of other files does not commence. Despite that, this approach seems inelegant and may not be the optimal way to go about it.