Ошибка: необходимо включить реквизит `google` при использовании "google-maps-react" в приложении React

#javascript #reactjs #react-props #google-maps-react

Вопрос:

Я собираю небольшое приложение react, которое использует Карты Google на странице. Я установил google-maps-react зависимость. Карты Google включены в компонент под названием DetailPlaqueCard. Смотрите ниже.

 import React, { useEffect, useState, useRef } from 'react';
import {Link} from 'react-router-dom';
import GoogleMapReact from 'google-maps-react';

function DetailPlaqueCard({match}){
const mapRef = useRef();
useEffect(() =>{
    fetchItem();
    console.log(match)
    // eslint-disable-next-line 
},[])
const [item, setItem] = useState([]);


const mapStyles = {
    width: '25%',
    height: '25%'
  };

const fetchItem = async()=>{
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
    // targetUrl = 'https://s3.eu-west-2.amazonaws.com/openplaques/open-plaques-london-2019-03-13.json'
    const fetchItem = await fetch(proxyUrl   `http://openplaques.org/plaques/${match.params.id}.json`)
    const item = await fetchItem.json();
    setItem(item);
    console.log(item)
}



return (
    
    <div>
        <Link to="/">
        <button>
        <i class="fas fa-arrow-left"></i>Back
        </button>
        </Link>
        <h1>Here is the detailed page</h1>
        <h2>The inscription:{item.inscription}</h2>
        <p>Address: {item.address}</p>
        <GoogleMapReact
            bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
            defaultCenter={{lat: item.latitude, lng: item.latitude}}
            defaultZoom={15}
            google={this.props.google}
            style={mapStyles}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({map}) => {
                mapRef.current = map;
            }}
        />
    </div>
   )
  }

  export default DetailPlaqueCard;

Я не уверен, почему я получаю эту ошибку. Я просмотрел документацию и включил необходимые свойства. Есть ли что-то, чего мне не хватает?

1. Похоже, вам не хватает google={} реквизита в GoogleMapReact компоненте или в нем. В документации похоже, что они используют google={this.props.google}

2. добавлено google={this.props.google} , теперь появляется следующая ошибка TypeError: Cannot read property 'props' of undefined

3. Из того, что я вижу, вышесказанное зависит от того, загружаете ли вы API автоматически или загружаете API вручную: вручную вы можете использовать google={window.google} , или при автоматической загрузке вы можете импортировать import {GoogleApiWrapper} from 'google-maps-react'; и включать реквизиты в свою функцию

4. Я добавил google={window.google} , и ошибка есть, но теперь карты нет, и я просто получаю Loading map...

5. Убедитесь, что у вас есть разрешенный URL локального хоста на платформе Google maps. Или он появится в режиме разработчика.

Ответ №1:

Установите «google-map-react» вместо «google-maps-react». Я слишком пытался выяснить, что было причиной этого, и в итоге это была довольно глупая ошибка. Я надеюсь, что это исправит проблему.