README not updated load() deprecated, importLibrary doesn't replace it 1-1

[realgs]

Steps to reproduce

1. Install js-api-loader 1.16.6, use steps from README to load google map script asynchronously - you get the IDE hint that load() is marked as deprecated, use importLibrary instead. ImportLibrary doesn't replace load(). Using load() everything works just fine but with the deprecation alert, using importLibrary it doesn't load maps.

Code example

            const loader = new Loader({
                libraries: ['places'],
                apiKey: this.apiKey,
            });
            loader.load().then((google) => {
                this.google = google;
                this.isLoading = false;
                this.isReady = true;
            });

I'd be happy to open a pull request to improve the project once you provide me with a solution. If load is deprecated what (and how) should be used instead?

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

@realgs Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[Schmell]

@realgs
Ya there is a new way to do it. I guess its more tree-shakeable or something

const addressSearchInput = document.querySelector('autocomplete')
const options = {
	componentRestrictions: { country: 'ca' },
	fields: ['formatted_address', 'address_components'],
}

// make a new loader here. NOTE there are no libraries here anymore
const loader = new Loader({
	apiKey: PUBLIC_GOOGLE_MAPSAPI_KEY,
	version: 'weekly'
})

// you can get anything from the places library here
const { Autocomplete, PlacesService, Place } = await loader.importLibrary('places')

//and to use one its something like this
const addressComplete = new Autocomplete(addressSearchInput , options)
addressComplete .addListener('place_changed', (place)=> console.log(place))

//repeat for other libraries
const { Map, TrafficLayer } = await loader.importLibrary('maps')
const { Marker } = await loader.importLibrary('marker')

I agree that documentation needs to reflect these changes.

[usefulthink]

I'd like to add that after loader.importLibrary() you will also have access to the global google.maps namespace as it was before after calling .load(). So for example:

const loader = new Loader(loaderOptions);
await loader.importLibrary('maps');

// you can now access everything like before:
const map = new google.maps.Map();

[owaisahmed5300]

Yes, indeed. with load we were able to load multiple libraries at once without any problem but with importLibrary we could only import 1 library at a time and in next recall we get below error.

Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match.

Assume we need Map and Markers, what we suppose to do?

[owaisahmed5300]

@Schmell Getting Warning

Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match.

[owaisahmed5300]

Relevent Issue: #809

Fix: Promise.all() instead await for every importLibrary.

import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: ''
  version: 'weekly',
});

let libraries: any = null;

async function loadLibraries() {
  if (!libraries) {
    // not ideal to load all but just for an example.
    libraries = await Promise.all([
      loader.importLibrary('maps'),
      loader.importLibrary('places'),
      loader.importLibrary('marker'),
      loader.importLibrary('geocoding'),
    ]);
  }
  return libraries;
}

const [{ Map }, { Autocomplete }, { AdvancedMarkerElement }, { Geocoder }] = await loadLibraries();

export { Map, AdvancedMarkerElement, Geocoder, Autocomplete };