Description
Hi Team Google Maps!
I just came across your library and I wanted to have a closer look. Previously, we have our own Javascript loader that dynamically adds the google Maps JS script element to head and issues a loaded event in our reactive environment. The loaded event tells us we can safely create a new Map now that the google namespace is loaded and available.
In our Ngrx effect, it looks something like this:
import {Injectable} from '@angular/core';
import {Actions, createEffect, ofType} from '@ngrx/effects';
import {catchError, map, switchMap, withLatestFrom} from 'rxjs';
import {from, of} from 'rxjs';
import * as GoogleMapsActions from './google-maps.actions';
import {GoogleMapsLoaderService} from '../../infrastructure/google-maps-loader.service';
import {GoogleMapsFacade} from '../../application/google-maps.facade';
@Injectable()
export class GoogleMapsEffects {
// load Google Maps library remotely
load$ = createEffect(
() =>
this.actions$.pipe(
ofType(GoogleMapsActions.loadGoogleMapsSDK),
withLatestFrom(
this.googleMapsFacade.loaded$,
({googleMapsAPIKey, libraries}, isLoaded) => {
return {googleMapsAPIKey, libraries, isLoaded}
}),
switchMap(({googleMapsAPIKey, libraries, isLoaded}) => {
if (googleMapsAPIKey == null || googleMapsAPIKey === '') {
return of(GoogleMapsActions.googleMapsSDKUnavailable());
}
if (isLoaded === true) {
return of(GoogleMapsActions.googleMapsSDKAlreadyLoaded());
}
return from(this.googleMapsLoaderService.load(googleMapsAPIKey, libraries)).pipe(
map(() => GoogleMapsActions.googleMapsSDKLoaded({googleMapsAPIKey, libraries})),
catchError(error => of(GoogleMapsActions.googleMapsSDKFailed({error: JSON.stringify(error)})))
);
})
)
);
constructor(private readonly googleMapsLoaderService: GoogleMapsLoaderService,
private readonly googleMapsFacade: GoogleMapsFacade,
private readonly actions$: Actions
) {
}
}
Notice that we do not do anything else at this point. We separate loading with instantiating. The event is all we need.
When looking at your loader, your documentation says to use methods that have all been deprecated and instead do something like this:
'loader.importLibraries('maps')`
Does this make any sense?
const loader = new Loader({apiKey: '', libraries: ['maps', 'drawing']});
loader.importLibrary('maps')
If we are using this npm module, it's probably because we want to load the Google Maps JS SDK, I would assume 'maps' gets loaded by default and libraries are all overlays and features on top of the actual map.
I would request that we keep the load() method around and not deprecate it [unless I am missing something obvious 🤔].
const loader = new Loader({apiKey: '', libraries: ['maps', 'drawing']});
loader.load()
Cheers,
Bjorn