response-google-maps HeatmapLayer: не удается прочитать свойства 'maps' из неопределенного

Question

import React from 'react'
const { compose, withProps, withStateHandlers } = require('recompose')
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  LatLng
} = require('react-google-maps')
import { connect } from 'react-redux'
import { MapInfoWindow } from './MapInfoWindow'
import HeatmapLayer from "react-google-maps/lib/components/visualization/HeatmapLayer";

class HeatMap extends React.Component {

    render() {

        var data = [new window.google.maps.LatLng(40.705076, -74.00916)]

        const HomeMap = compose(withScriptjs, withGoogleMap)(props => {
          (
          <GoogleMap defaultZoom={9} defaultCenter={{ lat: 40.705076, lng: -74.00916 }}>
              {props.pools ? (
                props.pools.map(pool => <MapInfoWindow key={pool.id} pool={pool} />)
              ) : (
                  <div />
                )}
            <HeatmapLayer data={data}/>
          </GoogleMap>
        )})

        return (
          <div className='googleMap'>
            <HomeMap
              googleMapURL="https://maps.googleapis.com/maps/api/js?key=###=3.exp&libraries=visualization,geometry,drawing,places"
                  loadingElement={<div style={{height: `100%`}} />}
                  containerElement={<div style={{height: `600px`}} />}
                  mapElement={<div style={{height: `100%`}} />}
            />
          </div>
        )
    }
}

export default connect(mapState, mapDispatch)(HeatMap)

Я пытался заставить работать Heatmap, но постоянно получаю сообщение об ошибке:

maps не определено в new window.google.maps.LatLng(40.705076, -74.00916).

Я также пытался с new google.maps.LatLng(40.705076, -74.00916), но я получаю ту же ошибку.

Есть идеи или предложения? Спасибо

Answer 1

Вам необходимо переместить new google.maps.LatLng внутрь функции визуализации withScriptJs. Если он находится вне функции рендеринга, браузер пытается использовать API Карт Google до завершения загрузки скрипта. Примерно как в примере ниже.

const HomeMap = compose(withScriptjs, withGoogleMap)(props => {
  const data = [new window.google.maps.LatLng(40.705076, -74.00916)];
  return (
    <GoogleMap defaultZoom={9} defaultCenter={{ lat: 40.705076, lng: -74.00916 }}>
      <HeatmapLayer data={data}/>
    </GoogleMap>
  );
});