Reactive Location Service (jQuery Plugin)

jquery.location.js

(function ($) {
        class LocationService {
            static observers = [];
            locationObj = {
                lat: null,
                lng: null,
                location: null,
                data: null,
            };

            static apiKeyIpstack = null;
            static apiKeyGmaps = null;

            static ipstack(apiKey) {
                this.apiKeyIpstack = apiKey;
                return this;
            }

            static gmaps(apiKey) {
                this.apiKeyGmaps = apiKey;
                return this;
            }

            static async subscribe(callback) {
                this.observers.push(callback);

                async function onError() {
                    console.log('Getting location via IPStack');
                    if (LocationService.apiKeyIpstack) {
                        try {
                            const response = await fetch(`https://api.ipstack.com/check?access_key=${LocationService.apiKeyIpstack}`);
                            const data = await response.json();
                            LocationService.locationObj.lat = data.latitude;
                            LocationService.locationObj.lng = data.longitude;
                            LocationService.locationObj.location = data.city + ', ' + data.region_name;
                            LocationService.notify(LocationService.locationObj);
                        } catch (error) {
                            console.error('Error fetching location via IPStack:', error);
                            LocationService.notifyError(error);
                        }
                    }
                }

                async function onSuccess(position) {
                    const { latitude, longitude } = position.coords;

                    LocationService.locationObj.lat = latitude;
                    LocationService.locationObj.lng = longitude;

                    console.log('Getting fine data from Google');

                    if (LocationService.apiKeyGmaps) {
                        try {
                            const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&sensor=false&key=${LocationService.apiKeyGmaps}`);
                            const data = await response.json();

                            if (data.results[0]) {
                                LocationService.locationObj.data = data.results[0];
                            } else {
                                onError();
                            }

                            LocationService.notify(LocationService.locationObj);
                        } catch (error) {
                            console.error('Error fetching location via Google Maps:', error);
                            LocationService.notifyError(error);
                        }
                    }
                }

                console.log('Getting location');
                navigator.geolocation.getCurrentPosition(onSuccess, onError);

                return this;
            }

            static notify(locationObj) {
                this.observers.forEach(observer => observer(locationObj));
                return this;
            }

            static notifyError(error) {
                this.observers.forEach(observer => observer({ error }));
                return this;
            }
        }

        $.fn.locationService = function (options) {
            const service = new LocationService();

            if (options.apiKeyIpstack) {
                service.ipstack(options.apiKeyIpstack);
            }

            if (options.apiKeyGmaps) {
                service.gmaps(options.apiKeyGmaps);
            }

            if (options.subscribe) {
                service.subscribe(options.subscribe);
            }

            return this;
        };

    })(jQuery);

use.jquery.location.js

$(document).ready(function () {
        $.fn.locationService({
            apiKeyIpstack: 'YOUR_IPSTACK_API_KEY',
            apiKeyGmaps: 'YOUR_GMAPS_API_KEY',
            subscribe: function (location) {
                if (location.error) {
                    console.error('Error:', location.error);
                } else {
                    console.log('Received location data:', location);
                    // Handle the location data as needed
                }
            }
        });
    });

JS Version: https://gist.github.com/AnandPilania/f9b5cab3ea3280b9017a6e3260ce0b2c