title: How to implement Google Maps search box in a React application
body: <p>I'm new to React and Google Maps. I'm using <a href="https://github.com/google-map-react/google-map-react" rel="noreferrer">google-map-react</a> to integrate Google Maps to my React application. I was able to successfully load the map and add markers.</p>
  
  <p>But I'm getting an error when trying to add the SearchBox. I followed the documentation here <a href="https://github.com/google-map-react/google-map-react/blob/master/API.md#adding-a-searchbox" rel="noreferrer">SeachBox Documentation</a> and also the issue thread <a href="https://github.com/google-map-react/google-map-react/issues/460" rel="noreferrer">GitHub issue</a>. But still I'm getting the error. What is wrong in this code?</p>
  
  <p><a href="https://i.stack.imgur.com/z5V0p.png" rel="noreferrer"><img src="https://i.stack.imgur.com/z5V0p.png" alt="enter image description here"></a></p>
  
  <p>Here is my code</p>
  
  <p><strong>App.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import GoogleMapReact from 'google-map-react';
  import './App.css';
  import Driver from './Driver';
  import Passenger from './Passenger';
  import SearchBox from './SearchBox';
  
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        apiReady: false,
        map: null,
        googlemaps: null
      };
    }
  
    static defaultProps = {
      center: {
        lat: 6.92,
        lng: 79.86
      },
      zoom: 15,
    };
  
    handleApiLoaded = (map, maps) =&gt; {
      // use map and maps objects
      if (map &amp;&amp; maps) {
        this.setState({
          apiReady: true,
          map: map,
          googlemaps: maps
        });
      }
    };
  
    render({ apiReady, googlemaps, map } = this.state) {
      return (
        // Important! Always set the container height explicitly
        &lt;div style={{ height: '100vh', width: '100%' }}&gt;
          &lt;GoogleMapReact
            bootstrapURLKeys={{ key: 'AIzaSyCk7pbkmNhknGumy2vgDykdgVj6lSreTt0', libraries: ['places'] }}
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) =&gt; this.handleApiLoaded(map, maps)}
          &gt;
            &lt;Driver
              lat={6.8972152}
              lng={79.8541014}
            /&gt;
            &lt;Passenger
              lat={6.9272012}
              lng={79.8681316}
            /&gt;
  
            {apiReady &amp;&amp; (&lt;SearchBox
              //  placeholder={"123 anywhere st."}
              //  onPlacesChanged={this.handleSearch} 
              map={map}
              googlemaps={googlemaps} /&gt;)}
          &lt;/GoogleMapReact&gt;
        &lt;/div&gt;
        )
    }
  }
  
  export default App
  </code></pre>
  
  <p><strong>SearchBox.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom'
  import PropTypes from 'prop-types'
  
  export default class SearchBox extends React.Component {
  
    static propTypes = {
      placeholder: PropTypes.string,
      onPlacesChanged: PropTypes.func
    }
    render() {
      return &lt;input ref="input" placeholder={this.props.placeholder} type="text"/&gt;;
    }
    onPlacesChanged = () =&gt; {
      if (this.props.onPlacesChanged) {
        this.props.onPlacesChanged(this.searchBox.getPlaces());
      }
    }
    componentDidMount() {
      var input = ReactDOM.findDOMNode(this.refs.input);
      // eslint-disable-next-line no-undef
      this.searchBox = new googlemaps.places.SearchBox(input);
      this.searchBox.addListener('places_changed', this.onPlacesChanged);
    }
    componentWillUnmount() {
      this.searchBox.removeListener('places_changed', this.onPlacesChanged);
    }
  
  }
  
  // eslint-disable-next-line no-unused-expressions
  // eslint-disable-next-line no-lone-blocks
  {/* &lt;script defer type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCk7pbkmNhknGumy2vgDykdgVj6lSreTt0&amp;libraries=places"&gt;&lt;/script&gt; */}
  </code></pre>
  
  <p>I have pasted the full code because I'm not sure where I went wrong.</p>