title: How to load the Google Places JS API Library in a React Project?
body: <p>I am using the 'react-places-autocomplete' library. I understand that I have to load the API using my key. I can't figure out where to place the script for the key such that the program will work. </p>
  
  <p>I saw a StackOverflow page where someone said to load it statically in index.js, which I tried:</p>
  
  <pre><code>import 'react-places-autocomplete';
  ...
  ReactDOM.render(
      &lt;div&gt;
      &lt;BrowserRouter&gt;
          &lt;App /&gt;
      &lt;/BrowserRouter&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js? 
       key=MY_KEY&amp;libraries=places"&gt;&lt;/script&gt;
      &lt;/div&gt;
      , document.getElementById('root'));
  </code></pre>
  
  <p>This doesn't work, I also tried to load it directly in the component (Which doesn't seem correct):</p>
  
  <pre><code>class My_Component extends React.Component {
  
  ...
  
  render() {
      return (
          &lt;div&gt;
              &lt;script src="https://maps.googleapis.com/maps/api/js? 
       key=MY_KEY&amp;libraries=places"&gt;&lt;/script&gt;
              &lt;PlacesAutocomplete
                  value={this.state.address}
                  onChange={this.handleChange}
                  onSelect={this.handleSelect}
              &gt;
  
           ....
  
           &lt;/div&gt;
          );
      }
  }
  
  </code></pre>
  
  <p>Using these approaches I keep getting the "Google Maps JavaScript API library must be loaded" error, and I have looked at the documentation and it doesn't specify where the tag needs to be placed, just that it needs to be somewhere. </p>