Блог

Моя карта Google выдает следующую ошибку: «Ой! Что-то пошло не так. Эта страница неправильно загрузила Карты Google. Технические подробности см. в консоли JavaScript «. Я использую Gatsby и пакет google-map-react. Мой код:

 const AnyReactComponent = ({ text }) => <div>{text}</div>;

static defaultProps = {
    center: {
        lat: 59.95,
        lng: 30.33
    },
    zoom: 11
};

<div style={{ height: '50vh', width: '100%' }}>
    <GoogleMapReact
        bootstrapURLKeys={{ key: "https://maps.google.com/maps?q=manhatanamp;t=amp;z=13amp;ie=UTF8amp;iwloc=amp;output=embed" }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
    >
        <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
        />
    </GoogleMapReact>
</div>
  

В bootstrapURLKeys вы должны добавить ключ API карты Google, а не URL. вы можете получить ключ из консоли Google https://developers.google.com/maps/documentation/javascript/get-api-key

  <GoogleMapReact
    bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
    ......
  />