Support and document loading Maps API via Bootstrap Loader

[caleyshemc]

Short description

Google now recommends loading the Maps API via the Bootstrap Loader. See: https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API

This library allows passing the googleMaps object, but it expects it to be a single object in the old format (as loaded by the old inline method). The Bootstrap Loader instead loads each library separately, on demand.

I'm creating this issue to document it if others want or need to switch to the Bootstrap Loader. Ideally this library would support this loading method, or at least document a way around it.

Current solution

I was eventually able to get this to work by creating my own googleMaps object out of the results of two calls to the loader:

async function initMap() {
  const places = google.maps.importLibrary('places');
  const geocoding = google.maps.importLibrary('geocoding');
  const maps = await Promise.all([places, geocoding]);
  return {
    places: maps[0],
    Geocoder: maps[1].Geocoder,
  };
}

In componentDidMount:

initMap().then((result) => {
  this.setState({
    isMapsLoaded: true,
    googleMaps: result,
  });
);

Render method:

if (this.state.isMapsLoaded) {
  return (
    <Geosuggest
      googleMaps={this.state.googleMaps}
    />
  );
}