Question

我建立了一个盖茨比（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环境变量是我需要执行的全部操作才能访问它，但显然我缺少一些东西。感谢您的帮助，谢谢

Answer 1

环境变量需要以docs所示的客户端javascript开始，以GATSBY_开头。

在构建过程中使用GATSBY_GOOGLE_API_KEY和process.env.GATSBY_GOOGLE_API_KEY进行访问，并将它们捆绑到您的Gatsby客户端代码中。

使用Gatsby和Netlify构建网站时，Google Maps InvalidKeyMapError

1 个答案: