Google Maps InvalidKeyMapError при создании сайта с помощью Gatsby и Netlify - PullRequest
Новая
       8

Google Maps InvalidKeyMapError при создании сайта с помощью Gatsby и Netlify

1 голос
/ 24 июня 2019

Я создал сайт Gatsby, который использует компонент карт Google, который я взял из пакета npm "google-maps-реакции". Все отлично работает в моей локальной среде, но при развертывании в Netlify я получаю сообщение об ошибке «Google Maps JavaScript API: InvalidKeyMapError».

Я прошел все шаги, чтобы убедиться, что мой ключ API зарегистрирован и правильно активирован. Я удостоверился, что ключ API объявлен как переменная среды в пользовательском интерфейсе Netlify, и у меня есть доступ к нему в моем компоненте с помощью 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)

Из того, что я прочитал, объявление переменной среды GOOGLE_API_KEY в пользовательском интерфейсе Netlify - это все, что мне нужно было сделать, чтобы получить к ней доступ, но я явно что-то упустил. Любая помощь приветствуется, спасибо

1 Ответ

0 голосов
/ 24 июня 2019

Переменные среды должны начинаться с GATSBY_ в клиентском javascript, как показано в документах .

Использование GATSBY_GOOGLE_API_KEY и process.env.GATSBY_GOOGLE_API_KEY для доступа к ним во времясборка и встраивается в ваш клиентский код Gatsby.

...