Javascript 谷歌地图不起作用

我正在构建这个天气应用程序。一切似乎都正常，但我无法让谷歌地图正常工作。我看到需要API密钥，我导入了它。然后在我的项目中安装react GoogleMaps时，遵循了react GoogleMaps的文档，但是它仍然不起作用，但是，我的控制台中不再有错误

你能看一下吗，这里怎么了？请随意克隆它。

---

对于问题中引用的特定应用程序，我可以在本地运行该应用程序时看到地图。但是，它非常非常狭窄。这似乎不是谷歌地图的问题，而是需要调整地图宽度的HTML表格布局问题

另一方面，如果您根本看不到任何地图，一个常见问题可能是由于将地图的

高度设置为
“100%”
。您将要求父容器100%的高度，这很容易是一个零高度的折叠
div
，因此您基本上不要求任何东西的100%

下面是一个使用@next版本（我写这篇文章时，当前为7.0.0）和React 15.6.1的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap } from "react-google-maps";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";

const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
  <GoogleMap
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
  />
)));

ReactDOM.render(
  <div style={{ height: '600px' }}>
    <GettingStartedGoogleMap
      googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.28"
      loadingElement={<div></div>}
      containerElement={ <div style={{ height: `100%` }} /> }
      mapElement={<div style={{ height: `100%` }} />}
    />
  </div>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react GoogleMaps”导入{withGoogleMap，GoogleMap}；
从“react google maps/lib/async/withScriptjs”导入withScriptjs；
const GettingStartedGoogleMap=withScriptjs（withGoogleMap（props=>(
)));
ReactDOM.render(
,
document.getElementById（'root'））
);

如果您移除外部
div
的固定高度
600px
或将其替换为
100%
，
div
将崩溃，您将根本看不到地图。希望这有帮助。
我猜你的“100%”身高是“100%”零。尝试使用固定值，如“300px”，查看是否显示地图。@RyanH！我不知道金塔拉斯的案子，但你的猜测解决了我的问题我会把你的猜测写下来作为答案，我会投上一票：）嗨，Seigo。很高兴听到这对你有帮助。我已经按照你的建议写了一个（更详细的）答案。干杯！：）我喜欢详细的回答。您是否有使用谷歌地图服务（如Places）的react示例项目？干杯我还没有机会使用Places图书馆：(