Javascript TypeError:无法读取属性'；地点'；在React组件内使用Google Location API时未定义的

我正在尝试配置GoogleLocationAPI以在表单输入中使用。我得到以下错误：

我正在index.html文件中使用以下脚本标记：

下面是我试图使用Google API的组件的代码：

import React from 'react'
/* global google */
const google = window.google = window.google ? window.google : {}

import { FormContainer, ModalTextInput } from './styles'
import '../styles.css'
import { Modal, Button, Form } from 'react-bootstrap'

import TelInput from './IntlTelInput'

class EditDetailsModal extends React.Component {

    constructor(props) {
    super(props);
    this.autocompleteInput = React.createRef();
    this.autocomplete = null;
    this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
  }

  componentDidMount() {
    this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
        {"types": ["geocode"]});

    this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
  }

  handlePlaceChanged(){
    const place = this.autocomplete.getPlace();
    this.props.onPlaceLoaded(place);
  }

  render() {
    return (
          <Modal show={this.props.show} onHide={this.props.handleClose} className="editModal">
                <FormContainer>
                    <Modal.Header className="editModalHeader">
                      <Modal.Title>Edit Personal Details</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form>
                          <Form.Group controlId="formBasicName">
                            <ModalTextInput customPlaceholder="Name"/>
                          </Form.Group>

                          <Form.Group controlId="formBasicEmail">
                            <ModalTextInput customPlaceholder="Email ID"/>
                          </Form.Group>

                          <Form.Group controlId="formBasicPhoneNumber">
                          <TelInput className="formInput"/>
                          </Form.Group>
                          <Form.Group controlId="formBasicName">
                            <ModalTextInput ref={this.autocompleteInput} customPlaceholder="Country you will work in"/>
                          </Form.Group>
                          <Button variant="primary" type="submit" className="submitBtn">
                            Save details
                          </Button>
                        </Form>
                </Modal.Body>
                </FormContainer>
        </Modal>
      )
  }

}

export default EditDetailsModal

从“React”导入React
/*全球谷歌*/
const google=window.google=window.google？window.google:{}
从“./styles”导入{FormContainer，ModAltePut}
导入“../styles.css”
从“react bootstrap”导入{Modal，Button，Form}
从“/IntlTelInput”导入TelInput
类EditDetailsModel扩展了React.Component{
建造师（道具）{
超级（道具）；
this.autocompleteInput=React.createRef（）；
this.autocomplete=null；
this.handlePlaceChanged=this.handlePlaceChanged.bind（this）；
}
componentDidMount（）{
this.autocomplete=new google.maps.places.autocomplete（this.autocompleteInput.current，
{“类型”：[“地理编码”]}）；
this.autocomplete.addListener（'place\u changed'，this.handlePlaceChanged）；
}
手部位置已更改（）{
const place=this.autocomplete.getPlace（）；
此.props.onPlaceLoaded（位置）；
}
render（）{
返回(
编辑个人详细信息
保存详细信息
)
}
}
导出默认EditDetailsDal

---

我尝试了许多修复，但它们似乎不起作用。

试试这里不，这对我不起作用。该问题中的错误表示位置未定义，而我得到的错误是无法读取未定义的“位置”，表明“google.maps”未定义。请提供一个示例来说明您的问题。你可以用它来做这件事。此外，脚本标记似乎缺少所需的API密钥参数，但如果您删除了此参数，请同时通知我们或仅使用

Key=YOUR\u API\u Key

。