title: How to implement the Google map API search autocomplete in React
body: <p>I'm following the official guide of <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox" rel="nofollow noreferrer">google maps</a> and trying to implement it in my react app as per the following:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './styles/locationInput.css';
  
  export class locationInput extends Component {
      render() {
          const { values, handleChange } = this.props;
  
          function initAutocomplete() {
              var input = document.getElementById('pac-input');
              var searchBox = new google.maps.places.SearchBox(input);
  
              var markers = [];
              searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();
  
                if (places.length == 0) {
                  return;
                }
  
                markers.forEach(function(marker) {
                  marker.setMap(null);
                });
                markers = [];
  
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                  if (!place.geometry) {
                    console.log("Returned place contains no geometry");
                    return;
                  }
                  var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                  };
  
                  markers.push(new google.maps.Marker({
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                  }));
  
                  if (place.geometry.viewport) {
                    bounds.union(place.geometry.viewport);
                  } else {
                    bounds.extend(place.geometry.location);
                  }
                });
  
              });
            }
            initAutocomplete()
          return (
  
                  &lt;input
                      defaultValue={values.CollegeName}
                      onChange={handleChange('CollegeName')}
                      id="pac-input"
                      className="controls"
                      type="text"
                      placeholder="Search Box"
                  /&gt;
  
          );
      }
  }
  
  export default locationInput;
  </code></pre>
  
  <blockquote>
    <p>I have initial the <code>&lt;script&gt;</code> in <code>index.html</code> </p>
  </blockquote>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places&amp;callback=initAutocomplete"
       async defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p>but I got this error<br><br>
   <strong>Failed to compile</strong></p>
  
  <pre><code>./src/public/form/lib-component/locationInput.js
    Line 10:24:  'google' is not defined  no-undef
    Line 25:23:  'google' is not defined  no-undef
    Line 33:17:  'google' is not defined  no-undef
    Line 34:19:  'google' is not defined  no-undef
    Line 35:19:  'google' is not defined  no-undef
    Line 36:23:  'google' is not defined  no-undef
    Line 39:22:  'google' is not defined  no-undef
  Search for the keywords to learn more about each error.
  </code></pre>
  
  <p>my question is when I tried to implement this code in plain <code>html</code> and <code>javascript</code> then it got worked flawlessly but not in react so how can I get it working here and how can i specify what <code>google</code> means here?</p>