Dynamic load
If you need to initialize the Google Maps API in a dynamic way you can use the dynamicLoad option of the plugin
configuration, this option start the plugin but it doesn't load the Google Maps API, you need to load it manually using
the googleMapsApiInitializer function from the utilities object exposed by the plugin as we show below
main.ts
//...
createApp(App)
.use(router)
.use(createGmapVuePlugin({ dynamicLoad: true }))
.mount("#app");
//...
In setup script
[your-component].vue - Composition API
import { onMounted } from "vue";
import { utilities } from "@gmap-vue/v3";
import { usePluginOptions } from "@gmap-vue/v3/composables";
const { googleMapsApiInitializer } = utilities;
const options = usePluginOptions();
onMounted(() => {
googleMapsApiInitializer(options);
});
or in options API
[your-component].vue - Options API
import { onMounted } from "vue";
import { utilities } from "@gmap-vue/v3";
const { googleMapsApiInitializer } = utilities;
export default {
mounted() {
googleMapsApiInitializer(this.$gmapOptions);
},
};