小编Nic*_*ico的帖子

我构建了一个 Gatsby 站点，该站点使用我从 npm 包“google-maps-react”中获取的 google maps 组件。在我的本地环境中一切正常，但是当我部署到 Netlify 时，我收到“Google Maps JavaScript API 错误：InvalidKeyMapError”。

我完成了确保我的 API 密钥已正确注册和激活的所有步骤。我确保在 Netlify UI 中将 API 密钥声明为环境变量，并在我的组件中使用“process.env.GOOGLE_API_KEY”访问它。

import React from "react"
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react"

export class MapContainer extends React.Component {


  render() {

    return (
      <Map google={this.props.google} zoom={14} initialCenter={{lat:37.769461, lng:-122.251831}}>
        <Marker onClick={this.onMarkerClick} name={"Current location"} />
        <InfoWindow onClose={this.onInfoWindowClose}>
          <div>
            ...some code
          </div>
        </InfoWindow>
      </Map>
    )
  }
}

export default GoogleApiWrapper({
    apiKey: (`${process.env.GOOGLE_API_KEY}`)
  })(MapContainer)

从我读过的内容来看，我需要在 Netlify UI 中声明 GOOGLE_API_KEY 环境变量才能访问它，但我显然错过了一些东西。任何帮助表示赞赏，谢谢