How to implement the Google map API search autocomplete in React

Question

I'm following the official guide of google maps and trying to implement it in my react app as per the following:

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 (

                <input
                    defaultValue={values.CollegeName}
                    onChange={handleChange('CollegeName')}
                    id="pac-input"
                    className="controls"
                    type="text"
                    placeholder="Search Box"
                />

        );
    }
}

export default locationInput;

I have initial the <script> in index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
     async defer></script>

but I got this error

Failed to compile

./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.

my question is when I tried to implement this code in plain html and javascript then it got worked flawlessly but not in react so how can I get it working here and how can i specify what google means here?

Answer 1

replace new google.maps with new window.google.maps in your code.