google-maps.jsx

import React from 'react';
import has from 'lodash.has';

class GoogleMaps extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      mapReady: this.props.mapReady
    };
  }

  static defaultProps = {
    mapReady: false
  }

  _checkMap=()=>{
    console.log('_checkMap');
    var timeout = null;
    if (!has(window, 'google.maps')) {
      console.log()
      if (timeout !== null) {
        clearTimeout(timeout);
      }
      timeout = window.setTimeout(()=>{
        this._checkMap();
      }, 1000);
    } else {
      clearTimeout(timeout);
      this.setState({
        mapReady: true
      })
    }
  }

  _loadMap=()=>{
    if (!has(window, 'google.maps')) {
      var $map = $(React.findDOMNode(this.refs.map));
      $map.append(
        $('<script>').attr({
          async: '',
          defer: '',
          src: `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`
        })
      );
      this._checkMap();
    }
  }

  componentDidMount(){
    this._loadMap();
  }

  render(){
    return (
      <div className='sf-google-map' ref='map'>
        <Component {...this.props} {...this.state} />
      </div>
    );
  }
}

class Geotargeting extends React.Component {
  ...
  
  render(){
    return (
      <GoogleMaps>
        <div className='sf-geotargeting' id='map' ref='geotargeting' style={{height: 100, width: 100}}></div>
      </GoogleMaps>
    );
  }
  
}