title: @react-google-maps/api's Autocomplete is giving me "This page cant load Google maps correctly"
body: <p>I am using <a href="https://www.npmjs.com/package/@react-google-maps/api" rel="nofollow noreferrer">https://www.npmjs.com/package/@react-google-maps/api</a> to render googlemaps and I am trying to get the Autocomplete to work. <a href="https://react-google-maps-api-docs.netlify.app/#autocomplete" rel="nofollow noreferrer">https://react-google-maps-api-docs.netlify.app/#autocomplete</a></p>
  <p>When I try to search for a location I get <em>&quot;This page cant load Google maps correctly&quot;</em>.
  The example on their website has the same error.
  <a href="https://i.stack.imgur.com/Xae8a.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xae8a.gif" alt="GoogleIsNotDefined" /></a></p>
  <pre><code>import React from 'react'
  import { GoogleMap, LoadScript, Autocomplete  } from '@react-google-maps/api';
  
  const api = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
  
  const containerStyle = {
      width: '1200px',
      height: '500px'
  };
  
  const center = {
      lat: -3.745,
      lng: -38.523
  };
  
  const Gmap = () =&gt; {
  
      return (
          &lt;LoadScript
              googleMapsApiKey ={api}
              libraries={[&quot;places&quot;]}
          &gt;
              &lt;GoogleMap
                  mapContainerStyle={containerStyle}
                  center={center}
                  zoom={10}
              &gt;
                  { /* Child components, such as markers, info windows, etc. */ }
                  &lt;Autocomplete&gt;
                      &lt;input
                          type=&quot;text&quot;
                          placeholder=&quot;Input&quot;
                          style={{
                              boxSizing: `border-box`,
                              border: `1px solid transparent`,
                              width: `240px`,
                              height: `32px`,
                              padding: `0 12px`,
                              borderRadius: `3px`,
                              boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                              fontSize: `14px`,
                              outline: `none`,
                              textOverflow: `ellipses`,
                              position: &quot;absolute&quot;,
                              left: &quot;50%&quot;,
                              marginLeft: &quot;-120px&quot;,
                              top: &quot;2%&quot;
                          }}
                      /&gt;
                  &lt;/Autocomplete&gt;
                  &lt;&gt;&lt;/&gt;
              &lt;/GoogleMap&gt;
          &lt;/LoadScript&gt;
      )
  }
  
  export default React.memo(Gmap)
  </code></pre>
  <p>You need to use your own <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" rel="nofollow noreferrer">Google api key</a> in the Codesandbox.</p>
  <p><a href="https://codesandbox.io/s/nice-galileo-zdn1c?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/nice-galileo-zdn1c?file=/src/App.js</a></p>