title: Load Google Maps in React App - 'map is assigned a value but never used'
body: <p>I am trying to render a map on a page using React but the map never displays. In console I can see this warning and it seems that the variable is not called anywhere. I have seen common implementations like this work on tutorials but I dont understand why it's not rendering here.</p>
  
  <p>This is my App component code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import './App.css';
  
  class App extends Component {
  
    componentDidMount() {
        this.renderMap();
    }
  
    renderMap = () =&gt; {
        this.loadScript("https://maps.googleapis.com/maps/api/" +
          "js?key=AIzaSyC1FpwqY0kv0hxQYPtGnn54ag14jHUI6Ow&amp;callback=initMap");
        window.initMap = this.initMap;
    };
  
    loadScript = (url) =&gt; {
        const index = window.document.getElementsByTagName("script")[0];
        const script = window.document.createElement("script");
        script.src = url;
        script.async = true;
        script.defer = true;
        index.parentNode.insertBefore(script, index);
    };
  
    initMap = () =&gt; {
        var map = new window.google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
        });
    };
  
    render() {
        return (
            &lt;div className="App"&gt;
                &lt;h1&gt;Google Maps in React App&lt;/h1&gt;
                &lt;div id="map"&gt; &lt;/div&gt;
            &lt;/div&gt;
        );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>This is the warning in console:</p>
  
  <pre><code>webpackHotDevClient.js:120 ./src/App.js
  Line 26:  'map' is assigned a value but never used  no-unused-vars
  </code></pre>
  
  <p>I have loaded the script in the component dynamically. Can someone help me out? Thanks.</p>