Google 使用 Gatsby 和 Netlify 构建站点时映射 InvalidKeyMapError

Question

我建立了一个 Gatsby 网站，它使用了我从 npm 包 "google-maps-react" 中获取的 google 地图组件。在我的本地环境中一切正常，但是当我部署到 Netlify 时，我得到 'Google Maps JavaScript API error: 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 环境变量是我需要做的才能访问它，但我显然遗漏了一些东西。感谢任何帮助，谢谢

Answer 1

环境变量需要在client-sidejavascript中以GATSBY_开头，如docs中所示。

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

Google 使用 Gatsby 和 Netlify 构建站点时映射 InvalidKeyMapError

Google Maps InvalidKeyMapError when building site with Gatsby and Netlify

gatsby

netlify