Reactjs 如何在React中实现Google map API搜索自动完成

我正在遵循的官方指南，并尝试在我的react应用程序中按照以下要求实施：

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;

但是我得到了这个错误

未能编译

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

---

我的问题是，当我试图用普通的

html

和

javascript

来实现这段代码时，它工作得很完美，但没有用react来实现，那么我如何才能让它在这里工作呢？我如何在代码中指定

google

的含义？

new google.maps

替换

new window.google.maps

尝试新建window.google.mapsAlso，这有一个很好的反应组件：@Ertemishak我不明白你所说的实现

window.google.maps

是什么意思。你能不能再多加一点…在你的代码中用

new window.google.maps

替换

new window.google.maps.@LáďaDurchánek我试过了，但我在集成一个来自它的其他组件，而且它看起来不像GMAPAPI的文档那么好
./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.