在 Next.js 中使用 Google 地图

Question

为了在 Next.js Web 应用程序中使用 Google 地图。 我按照这个教程说明进行操作。

问题是，当我想要单击按钮并使地图出现在浏览器中时，我看不到地图，但在 Web 开发人员工具的控制台中看到此消息：

ReferenceError: google is not defined

确实，我没有看到谷歌的定义。 （它是从哪里来的？）

我可能做错了什么或忘记做什么？

Answer 1

谷歌地图sdk似乎没有正确加载。我不知道确切的解决方案，但我建议使用 https://github.com/visgl/react-google-maps 而不是直接使用

@googlemaps/js-api-loader

加载 sdk。

这是将 Google 地图与 React 集成的官方方式（在Google 地图网站中提到）

它得到了维护，并且有很多与 Next.js 集成良好的示例。我在工作中使用它，没有遇到任何问题。