Google не определен: как проверить, загружен ли скрипт Google Maps в React

Question

Иногда я получаю сообщение "Google is undefined", когда загружаю свой компонент, содержащий карту, в свой проект React. Причина, по-видимому, заключается в том, что скрипт Google API не загружается во время, когда интернет-соединение недостаточно хорошее.

Я загружаю скрипт api maps в app.js вот так.

componentWillMount() {
    const API_KEY = process.env.GOOGLEMAP_API_KEY;
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;
    script.async = true;
    script.defer = true;
    document.head.append(script);
  }

Есть ли способ проверить, загружен ли скрипт карт Google, перед возвратом renderApp или использовать проверку где-нибудь еще в приложении? Я пытался использовать typeOf google и typeOf google.maps, но они просто возвращают неопределенное.

renderApp() {
      return (
        <div>
          <Header />
          <Main />
        </div>
      );
  }

render() {
    return (
      <div>
        {this.renderApp()}
      </div>
    );
  }

Помимо использования библиотеки response-async-script-loader, как проверить, доступны ли карты Google, перед тем как визуализировать компонент. Решением может быть React-async-script-loader, но для этого потребуется серьезная переделка компонента моей карты.

Я нашел некоторые обсуждения в Интернете, но, похоже, ничего не работает.

Answer 1

Существует параметр обратного вызова, который вы можете передать в URL.Он будет вызываться при загрузке асинхронного файла.

Когда API будет готов, он вызовет функцию, указанную с помощью параметра обратного вызова.

&callback=initMap

Пример:

"https://maps.googleapis.com/maps/api/js?${API_KEY}&callback=initMap"