title: Include google maps script when component mounts in React
body: <p>I am using a <a href="https://github.com/ubilabs/react-geosuggest" rel="nofollow noreferrer">React-geosuggest library</a> in my application and it requires that I include the google maps script tags in the html page of my application. However, I don't want this because I want the script to only be included when a component mounts.</p>
  <p>I tried creating the script in the <code>componentDidMount</code> function but no luck.</p>
  <pre><code>componentDidMount() {
      const script = document.createElement('script');
  
      script.src =
        'https://maps.googleapis.com/maps/api/js?key=AIzaSyAwyph7a_yiJUZZeR4XZy2gwFSUEDCDYY8&amp;libraries=places';
      script.async = true;
  
      document.body.appendChild(script);
    }
  </code></pre>
  <p>When I try to use it in the component, the app complains that <code>google is not defined</code>.</p>
  <pre><code>&lt;Geosuggest
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onChange={this.onChange}
          onSuggestSelect={this.onSuggestSelect}
          onSuggestNoResults={this.onSuggestNoResults}
          location={new google.maps.LatLng(53.558572, 9.9278215)}
          radius={20}
  /&gt;
  </code></pre>
  <p>Is there a way to include the google maps script when the component mounts rather than including it in the <code>index.html</code>.</p>
  <p>Thanks.</p>