OverlappingMarkerSpiderfier is not defined (Vue.js)

Question

I'm trying to implement the OverlappingMarkerSpiderfier for my Google Maps, and it works because my markers are able to "spiderfy" when I click on a marker.

My issue is that in my dev console on VS Code, ESLint is still giving me the error 'OverlappingMarkerSpiderfier' is not defined. I don't really know what the issue is since my markers are working as intended when I click on them. Below is a picture showing that OverlappingMarkerWorkers even though there is an error from ESLint:

I want to get rid of the error in case a future error arises because of it. I've searched for solutions, and many people have commented that OverlappingMarkerSpiderfier should be loaded after Google Maps load. I've done that, but the error still persists.

I load my Google Maps asynchronously; below is my .js file that loads the Google Maps and OverlappingMarkerSpiderfier:

import api_keys from './api_keys'

const API_KEY = api_keys.google_maps_api_key;
const CALLBACK_NAME = 'gmapsCallback';

let initialized = !!window.google;
let resolveInitPromise;
let rejectInitPromise;

const initPromise = new Promise((resolve, reject) => {
  resolveInitPromise = resolve;
  rejectInitPromise = reject;
});

export default function init() {
  if (initialized) return initPromise;

  initialized = true;

   window[CALLBACK_NAME] = () => resolveInitPromise(window.google);

   const script = document.createElement('script');
   script.async = true;
   script.defer = true;
   script.src = `https://maps.googleapis.com/maps/api/jskey=${API_KEY}&callback=${CALLBACK_NAME}`;
   script.onerror = rejectInitPromise;
   document.querySelector('head').appendChild(script);

   const spiderfier = document.createElement('script');
   spiderfier.defer = true;
   spiderfier.src = "https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js";
   spiderfier.onerror = rejectInitPromise;
   document.querySelector('head').appendChild(spiderfier);

   return initPromise;
}

The following is my GoogleMaps component. The OverlappingMarkerSpiderfier implementation is located within "watch":

<template>
    <div id="google-map">

    </div>
</template>

<script>
import gMaps from '../lib/gMaps.js'

export default {
    name: 'GoogleMaps',
    props: {
        events: Array
    },
    data() {
        return {
            map: null,
            locations: []
        }
    },
    async mounted() {
        try {
            const google = await gMaps();
            const geocoder = new google.maps.Geocoder();
            this.map = new google.maps.Map(this.$el);

            geocoder.geocode({ address: 'USA'}, (results, status) => {
                if (status !== 'OK' || !results[0]) {
                    throw new Error(status);
                }

                this.map.setCenter(results[0].geometry.location);
                this.map.fitBounds(results[0].geometry.viewport);
            });
        } catch (error) {
            console.error(error);
        }
    },
    watch: {
        async events() { //creates markers for the map; data is from a 3rd party API that is handled by a different component
            try {
                const google = await gMaps();

                var oms = new OverlappingMarkerSpiderfier(this.map, {
                    markersWontMove: true,
                    markersWontHide: true,
                    basicFormatEvents: true
                })

                for(let i = 0; i < this.events.length; i++) {
                    let marker = new google.maps.Marker({
                        position: {
                            lat: parseInt(this.events[i].latitude, 10),
                            lng: parseInt(this.events[i].longitude, 10)
                        },
                        map: this.map,
                        title: this.events[i].title
                    })

                    let iw = new google.maps.InfoWindow({
                        content: this.events[i].description || 'No description available.'
                    });

                    google.maps.event.addListener(marker, 'spider_click', function() {
                        iw.open(this.map, marker);
                    });

                    oms.addMarker(marker);
                }
            }
            catch(error) {
                console.error(error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#google-map {
    width: auto;
    height: 100vh;
}
</style>

Answer 1

try either 1 of these

1. this.$nexttick(()=>{ code in mounted hook.... })
2. check if window.google object is loaded and your map reference is available before instantiating OverlappingMarkerSpiderfier.