Dynamically load map libraries

[indrimuska]

Hi all,
This version of the map loader, like the previous one, does not provide the ability to incrementally and dynamically load libraries at different instance of time.

In my use case I have a single page app with forms which show an Autocomplete, a Map or a Map with drawing tools, depending on the selected route. I have modeled these control in reusable building blocks (e.g. React components, Angular directives, Web Elements, ...), but unfortunately each control requires a different subset of map library:

• autocomplete: ["places"]
• map: ["places"],
• map with drawing tools: ["places", "drawing"]

If I am not wrong, this loader should be able to guarantee 1-time-loading of libraries, so if I require "places", then I cannot load "drawing" later anymore. Basically the loader dies as soon as you use it (actually it may work if I use it multiple times, but I am not sure if the previously provided callback will be fired again).

The loader should take the ownership of handling multiple loading requests, also avoiding to load
libraries which are already in place.

SBE:

const loader1 = new Loader({ apiKey, libraries: ["places"] });
await loader1.load(); // <-- loads "places" lib

const loader2 = new Loader({ apiKey, libraries: ["places", "drawing"] });
await loader2.load(); // <-- loads only "drawing" lib

The implementations is also quite easy, broadly like the following:

libraries: Libraries;
constructor(libraries: Libraries) {
   // filter out already loaded services
   const librariesToLoad = libraries.filter(library => this.libraries.indexOf(library) < 0);
   // everything is loaded already?
   if (librariesToLoad.length === 0) return;
   // save reference to new libs
   this.libraries.push(...librariesToLoad);
   // create tag and load `librariesToLoad` libs
   // ...
}

For what concern the callback to be provided in the URL, this can be dynamically provided with an incremental name:

window[`__googleMapsCallback_${++this.cbNo}`] = this.callback.bind(this);

url += `?callback=__googleMapsCallback_${this.cbNo}`;

Thanks,
Indri

[jpoehnelt]

Thanks for reporting this use case. I'm not sure we will be able to support it though. If I make a request to load without any libraries followed by another with a library, I get the error about the API being loaded multiple times. It may work, but is probably fragile and could be broken in future releases. I'll dig a bit deeper internally to see what that error is actually about.

Here is a simple jsfiddle with two script loads demonstrating error: https://jsfiddle.net/jwpoehnelt/3ft4m92d/3/.

[jpoehnelt]

This issue(multiple loads) has been around for years. I would be concerned about any state tied to existing objects and billing implications. I'm think I am going to take a different route here albeit a longer term one and advocate for a public method to load additional libraries. Something like the following:

google.maps.load('places').then(...)

// or

google.maps.loadLibrary('places').then(...)

// or

google.maps.loadLibraries(['places']).then(...)

From a first glance at the internals, there is nothing fundamentally complex about this but will require some time for it to be released.

[JustFly1984]

@jpoehnelt I would like to add one more use-case for dynamic load map - language switch.

I'm a maintainer of @react-google-maps/api https://www.npmjs.com/package/@react-google-maps/api
I've released new version 1.12.0 with React hook based on your library.

I have my own script for loading googlemapsapi, and I'm seeing that with your script it is not possible to build url using googleMapsClientId and channel params.

One more request: could you please export type Libraries for usage? I had to copy it from your project to mine.

[jpoehnelt]

@JustFly1984

For the language request, can you file a feature request at https://issuetracker.google.com/issues/new?component=188853&template=787814.

Premium plans are now defunct and most of these will expire or be expiring shortly. No other users require client id and/or channel. I opened #69 for this.

[JustFly1984]

@jpoehnelt I have created an issue, please follow up. https://issuetracker.google.com/issues/170657543

[JustFly1984]

@jpoehnelt it turns out, there is already an issue exists https://issuetracker.google.com/issues/35819089

[jpoehnelt]

channel has been added to the latest release in #72.