вот скрин import React, { Component } from 'react'
import { InfoWindow } from 'react-google-maps'
import { CardBody, CardTitle, CardSubtitle, CardText, Row, Col } from 'reactstrap'
const { compose, withProps, withHandlers } = require("recompose");
const {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} = require("react-google-maps");
const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");
class MarkerElement extends Component {
state = {
placeAdditionalDetails: [],
}
getBikePointOccupancy() {
fetch('https://api-argon.tfl.gov.uk/Occupancy/BikePoints/' + this.props.row.id)
.then(response => response.json())
.then((oc) => {
this.setState({ placeAdditionalDetails: oc[0] })
})
}
onMarkerClick() {
this.getBikePointOccupancy();
this.props.onToggleOpen(this.props.row.id, true);
}
render() {
const { row, onToggleOpen, placeToShow, isOpen } = this.props;
return (
withHandlers({
onMarkerClustererClick: () => (markerClusterer) => {
const clickedMarkers = markerClusterer.getMarkers()
console.log(`Current clicked markers length: ${clickedMarkers.length}`)
console.log(clickedMarkers)
},
}),
withScriptjs,
withGoogleMap
)(props =>
<MarkerClusterer
onClick={props.onMarkerClustererClick}
averageCenter
enableRetinaIcons
gridSize={60}
>
<Marker position={ {lat: row.lat, lng: row.lon} } id={ row.id } onClick={() => this.onMarkerClick()}>
{
row.id === placeToShow && isOpen &&
<Row>
<InfoWindow>
<CardBody>
<Col md={6}>
<CardTitle>
{
row !== undefined &&
row.commonName
}
</CardTitle>
</Col>
<Col md={6}>
<p>Bikes count: {this.state.placeAdditionalDetails.bikesCount}</p>
<p>Empty docks: {this.state.placeAdditionalDetails.emptyDocks}</p>
<p>Total docks: {this.state.placeAdditionalDetails.totalDocks}</p>
</Col>
</CardBody>
</InfoWindow>
</Row>
}
</Marker>
</MarkerClusterer>
);
}
}
export default MarkerElement;