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

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.