Javascript React Google maps API initMap不是函数，没有包

接收到initMap不是函数的以下错误。我试图不使用任何额外的包来异步加载这个脚本，也不使用GoogleMapsAPI。 我试图通过控制台log initMap来查看脚本何时被加载，但是我仍然得到一个错误，即它不是一个函数。我可以将此函数移动到componentDidMount之外，甚至移动到App组件之外，但错误是相同的

我猜这与脚本是通过document.createElement加载的有关，但initMap函数不是，因为当我查看Google Maps API的其他示例时，它在index.html页面上显示了API URL和initMap function

这个假设正确吗？有没有一种方法可以轻松地将函数作为脚本或Google Maps API异步加载到React中，而无需使用任何其他软件包

Uncaught Ib {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Ib (https://maps.googleapis.com/m…ZVRgF122wCkVf4P67Y&v=3.32&callback=initMap:163:56"}

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render（，document.getElementById（'root'）；
registerServiceWorker（）；
进口反应{
组成部分
}从“反应”
导入“./App.css”
让地图；
导出默认类应用程序扩展组件{
componentDidMount（）{
函数initMap（）{
console.log（'loaded'）
}
常量脚本=document.createElement（'script'）
script.async=true
script.defer=true
script.src=”https://maps.googleapis.com/maps/api/js?key={myAPIkey}=3.32&callback=initMap“
document.head.appendChild（脚本）
}
render（）{
报税表（<
div>{
这张地图
} <
div样式={
{
宽度：500，
身高：500
}
}
id=“地图”/>
<
/div>
)
}
}

正文{
字体系列：Arial，无衬线；
身高：100%；
保证金：0；
填充：0；
}
#地图{
宽度：500；
身高：500；
}

反应图

事实上，正如Alexander Staroselsky注意到的那样，callback=initMap正在窗口中查找函数initMap。您应该将initMap函数设置为全局函数，或者将类内的initMap函数指定给窗口对象上的变量，如下所示：

window.initMap = this.initMap.bind(this);

---

callback=initMap

正在

窗口中查找函数
initMap
<您的
应用程序
组件的code>initMap

未连接到

窗口

，因此脚本回调无法查看/访问。这对我来说很有效，我还发现在中列出了这一点，您还可以从用于加载googleMaps脚本的脚本标记中的

src

URL中删除

callback=initMap

query参数