Issues loading places script for SearchField

In the container my page component I’m loading the places script including my key and language.

const key = process.env.GOOGLE_API_KEY
    const language = 'NL'

    const placesUrl = `https://maps.google.com/maps/api/js?key=${ key }&language=${ language }libraries=places&sensor=false`

    load(placesUrl, { async: true }, (err, script) => {
      if (err) { console.log('error in load-script: ', err) }
      else { console.log('succes in load-script script.src: ', script.src) }
    })

Then in a child container I’m using the <GoogleMap />-tag feeding it only an options object and defaultCenter and defaultZoom. In my console I receive the following error:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors. Google Maps API warning: NoApiKeys Google Maps API warning: SensorNotRequired

Also, I recieve an error for the searchField itself, copied from the searchbox example in readme:

Uncaught ReferenceError: google is not defined

Can I feed options and defaults in GoogleMap component, even after the script was already loaded? Is there a working example with the searchField included ?

[istarkov]

@matmac the answer is directly above your comment, however if you just want to use places lib in other place without map

// bootstrapURLKeys.js
export const bootstrapURLKeys = {
  ...yourKeys,
  libraries: ['places'].join(','),
}

// places service.js 
import GoogleMapReact from 'google-map-react';
const { googleMapLoader } = GoogleMapReact;
import { bootstrapURLKeys } from './bootstrapURLKeys';
...
googleMapLoader(bootstrapURLKeys)
        .then((maps) => {
          const places = new maps.places.PlacesService(fakeElt);
          // use places
        }
...

// map.js
import { bootstrapURLKeys } from './bootstrapURLKeys';
...
<GoogleMap bootstrapURLKeys={bootstrapURLKeys}>
...

[istarkov]

The only way is to use custom loader which you can provide via googleMapLoader property, it must return Promise resolved to window.google.maps which google api defines at load.

Internally if nothing is provided this loader is used: https://github.com/istarkov/google-map-react/blob/master/src/utils/loaders/google_map_loader.js

So the idea is to return Promise which will be resolved only after third-party or your own google-map api will be loaded.