Интеграция компонента карты Google с реагированием HOC?

Question

import React,{Component } from 'react';
import {
  withGoogleMap,
  GoogleMap,
  withScriptjs,
  Marker,
  InfoWindow,
} from 'react-google-maps';
import {compose, withProps, withStateHandlers} from 'recompose';
import places from 'places.json';

class MapComponent extends Component {
  constructor (props) {
    super (props);
    this.state = {
      zoom: 11,
      center: {lat: 29.969516, lng: -90.103866},
      markers: [],
      lat:'',
      lng:'',
      markersLoaded: false,
    };
  }

  componentDidMount () {
    let geocoder = new window.google.maps.Geocoder ();
    geocoder.geocode ({address: 'Bakerstreet, 2'}, function (results, status) {
      if (status == 'OK') {
        this.setState ({
          lat: results[0].geometry.location.lat (),
          lng: results[0].geometry.location.lng (),
        });
      } else {
        console.log (
          'Geocode was not successful for the following reason:',
          status
        );
      }
    });
  }

  render () {
    const { lat, lng } = this.state;
    const GoogleMapExample = withGoogleMap (props => (
      <GoogleMap
        defaultZoom={props.zoom}
        defaultCenter={props.center}
        options={{styles: props.mapdynamic ? darkThemeStyle : lightThemeStyle}}
      >
        {props.places &&
          props.places.map ((place, i) => {
            let lat = parseFloat (place.latitude, 10);
            let lng = parseFloat (place.longitude, 10);

            return (
              <Marker
                id={place.id}
                key={place.id}
                position={{lat: lat, lng: lng}}
                icon="http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
                onMouseOver={props.onToggleOpen.bind (this, i)}
              >
                {props.infoWindows[i].isOpen &&
                  <InfoWindow onCloseClick={props.onToggleOpen.bind (i)}>
                    <div>{place.name}</div>
                  </InfoWindow>}
              </Marker>
            );
          })}
      </GoogleMap>
    ));

    return (
      <div>
      <GoogleMapExample 
      center={{lat: 40.6451594, lng: -74.0850826}} 
      zoom={10} 
      places={places} />
        
      </div>
    );
  }
}
export default compose (
  withProps ({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=YOUR KEY&libraries=geometry,drawing,places',
    loadingElement: <div style={{height: `100%`}} />,
    containerElement: (
      <div style={{height: '100%', width: '100%', padding: '10px'}} />
    ),
    mapElement: <div style={{height: '100%'}} />,
  }),
  withStateHandlers (
    props => ({
      infoWindows: props.places.map (p => {
        return {isOpen: false};
      }),
    }),
    {
      onToggleOpen: ({infoWindows}) => selectedIndex => ({
        infoWindows: infoWindows.map ((iw, i) => {
          iw.isOpen = selectedIndex === i;
          return iw;
        }),
      }),
    }
  ),
  withScriptjs,
  withGoogleMap
) (MapComponent);

Я пишу компонент карты Google, используя компонент порядка реагирования.Но когда я пытаюсь запустить это, я получаю какую-то ошибку.

Не могли бы вы кто-нибудь взглянуть на это и дать мне знать, какие проблемы здесь.Я получаю следующую ошибку, такую ​​как нарушение инварианта: отсутствует обязательный реквизит containerElement или mapElement.Вы должны предоставить их обоих.Экземпляр google.maps.Map будет инициализирован в mapElement и обернут в containerElement.Вы должны предоставить оба из них, так как Google Map требует, чтобы DOM имел высоту при инициализации.

С уважением

Answer 1

Вы дополнительно использовали с GoogleMap hoc в методе рендеринга, который вам не нужен

render () {
    const { lat, lng } = this.state;
    return (
      <GoogleMap
        defaultZoom={10}
        defaultCenter={{lat: 40.6451594, lng: -74.0850826}}
        options={{styles: props.mapdynamic ? darkThemeStyle : lightThemeStyle}}
      >
        {places &&
          places.map ((place, i) => {
            let lat = parseFloat (place.latitude, 10);
            let lng = parseFloat (place.longitude, 10);

            return (
              <Marker
                id={place.id}
                key={place.id}
                position={{lat: lat, lng: lng}}
                icon="http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
                onMouseOver={props.onToggleOpen.bind (this, i)}
              >
                {props.infoWindows[i].isOpen &&
                  <InfoWindow onCloseClick={props.onToggleOpen.bind (i)}>
                    <div>{place.name}</div>
                  </InfoWindow>}
              </Marker>
            );
          })}
      </GoogleMap>
    );
  }