使用 Gatsby 和 Netlify 构建站点时出现 Google Maps InvalidKeyMapError答案

【问题标题】：Google Maps InvalidKeyMapError when building site with Gatsby and Netlify使用 Gatsby 和 Netlify 构建站点时出现 Google Maps InvalidKeyMapError
【发布时间】：2019-11-06 13:25:51
【问题描述】：

我建立了一个 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 环境变量是我需要做的所有事情才能访问它，但我显然遗漏了一些东西。感谢您的帮助，谢谢

【问题讨论】：

标签： gatsby netlify

【解决方案1】：

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

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

【讨论】：

我可以确认。我也遇到了同样的问题，但是这篇文章解决了我的问题。谢谢！
很奇怪，但它在我的 Gatsby 应用程序中解决了同样的问题。