gatsby - 使用 Gatsby 和 Netlify 构建站点时，Google Maps InvalidKeyMapError

Question

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

我完成了确保我的 API key 已正确注册和激活的所有步骤。我确保在 Netlify UI 中将 API key 声明为环境变量，并在我的组件中使用“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 环境变量才能访问它，但我显然错过了一些东西。任何帮助表示赞赏，谢谢

Answer 1

环境变量需要以GATSBY_开头在客户端javascript中，如docs所示.

使用 GATSBY_GOOGLE_API_KEY和 process.env.GATSBY_GOOGLE_API_KEY以便在构建期间访问它们并捆绑到您的 Gatsby 客户端代码中。