Я работаю над приложением реагирования, в которое встроены карты Google. Карты имеют некоторые маркеры, и проблема в том, что Infowindow не отображается при нажатии маркера, а также не регистрирует никаких ошибок. Маркеры просто обновляются при нажатии. Я включил только необходимый код. Все остальное работает как положено, помогите пожалуйста!
export class MapComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
usedLockers: [
{lat: 12.9966, lng: 77.6303},
],
showModal: false,
freeLockersLocation:[],
asset:[],
isloaded:false,
currentMarkerId:'',
isDisabled:false,
positionLoaded:false,
}
this.displayFreeLockers = this.displayFreeLockers.bind(this);
this.displayLocationInfo=this.displayLocationInfo.bind(this);
}
displayFreeLockers = () => {
return this.state.asset.map((element, index1) => {
if(element.availability>=1)
return(
<Marker
key={index1}
id={index1}
position={{
lat: element.lat,
lng: element.lng,
}
label='Free'
icon='freeLockerIcon.png'
onClick=
{() => this.handleToggleModal(element.id) }
/>)
})
}
}
handleToggleModal(id)
{
this.setState({ showModal: !this.state.showModal,currentMarkerId:id });
}
render()
{
const { showModal } = this.state;
var markerId=this.state.currentMarkerId
return (
<div className="mapcontainer">
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
center={{ lat:this.state.currentLatitiude, lng:this.state.currentLongitude}}
>
{this.displayFreeLockers()}
{this.displayUsedLockers()}
{this.displayCurrentLocationMarker()}
</Map>
{showModal &&
<InfoWindow onCloseClick={() => this.handleToggleModal()}>
<div className="modal-window">
<p>asdf</p>
</div>
</InfoWindow>}
</div>
);
}
}
}
export default GoogleApiWrapper({
apiKey:'key'
})(MapComponent);