title: 'Google' is not defined: adding Google Maps API in React JS
body: <p>React JS newbie here, so please bear with me.</p>
  <p>I added the Google Maps API script in my <code>index.html</code> file, like this:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot;&gt;
  
      &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot;&gt;
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css&quot;&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    
      &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=MY-API-IS-HERE&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Then, I installed <code>google-maps-react</code> with <code>npm</code> so I could use it's components. I imported this library in my component like this:</p>
  <pre><code>import React, { Component } from 'react';
  import GoogleMapReact from 'google-map-react';
  
  class BaseMap extends Component {
      constructor() {
          super();
          this.state = {
              center: {lat: 42, lng: 14},
              zoom: 10
          }
      };
  
      render() {
          let location = {
              center: '',
              zoom: ''
          }
  
          return (
              &lt;GoogleMapReact&gt;
              &lt;/GoogleMapReact&gt;
          );
      }
  
      myMethod(){
          let geocoder = new google.maps.Geocoder(); 
      }
  }
  
  export default BaseMap;
  </code></pre>
  <p>However, when I try to use <code>google.maps.Geocoder</code>, I get:</p>
  <pre><code>Line 30:  'google' is not defined  no-undef
  </code></pre>
  <p>As I know, <code>google</code> should be a global, window object since I included the Google Maps API script in the html file. However, it isn't defined.</p>
  <p>Any ideas? Tnx in advance!</p>