title: Uncaught Reference Error: google is not defined (Google Maps JavaScript API usage with client-side webpart project
body: <p>For a bit of context, I'm building a client-side webpart (SharePoint Framework) to calculate routes given waypoints specified by the user. The project has been scaffolded using React and TypeScript.</p>
  
  <p>So far, I've managed to display the map using Tom Chen's react-google-maps. I've used the <code>withScriptjs</code> method to asynchronously load Google Maps API V3 and it's working fine i.e. the map shows up.
  Now the problem is I can't get hold of the 'google' object needed to access the Directions Service (which will be used to calculate and render routes on the map)</p>
  
  <p>Here on StackOverflow, similar answers have been asked and from the answers, I get that the problem comes from the fact that the code using the object</p>
  
  <pre><code>public componentDidMount() {
      console.log(new google.maps.DirectionsService());
  }
  </code></pre>
  
  <p>gets executed before the API has fully loaded.
  I've tried several things to make it work but nothing seems to work:</p>
  
  <ol>
  <li>The API can't be loaded using script tags (I don't know if this is due to the specifics of my project) which is why I've used the built-in method <code>withScriptjs</code> provided by the package (react-google-maps).</li>
  <li>I tried to add the API as an external resource (first, I installed the google maps typescript typings and then added the followings lines in the <code>config.json</code> file of the project:</li>
  </ol>
  
  <p>Code Snapshot:</p>
  
  <p><img src="https://i.stack.imgur.com/faY3I.png" alt="code snapshot"></p>
  
  <p>Didn't work.</p>
  
  <ol start="3">
  <li>I also tried the react-async-script-loader to load the API but it didn't work either.</li>
  <li>My latest attempt has been to use Jam3/google-maps-api to get the google.maps Object using a promise once it has been resolved. It failed too.</li>
  </ol>
  
  <p>Maybe,I missed something while trying out these different solutions. As of now, I'm going through each of them once more to be certain I've fully explored any solution.</p>
  
  <p>I'd appreciate some help, thanks!</p>