Infow window onclick is not working - google-maps

Question

infowWindow onclick event and infowWindow options not working?
This is the code that i am trying:
import React from 'react'
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
const mapOptions = {
scrollwheel: false,
draggable: true,
rotateControl: false,
scaleControl: false,
streetViewControl: false,
panControl: false
}
const num10 = 10
const descriptionLentgh = 35
const GettingStartedGoogleMap = withGoogleMap((props) => (
<GoogleMap
options={mapOptions}
ref={props.onMapLoad}
defaultZoom={4}
center={props.center}
onClick={props.onMapClick}
>
{props.markers.map((marker, index) => (
<Marker
key={index}
position={marker.position}
onClick={() => props.onMarkerClick(marker)}
icon={marker.markerIcon === true
? '/images/markerlogo2.png' : '/images/markerlogo.png'}
label={{ text: `$${marker.rate}`, color: 'white' }}
{...marker}
//onRightClick={() => props.onMarkerRightClick(index)}
>
{marker.showInfo && (
<InfoWindow onClick={props.onWindowClick}
onCloseClick={() => props.onMarkerClose(marker)}
>
<div className="">
<div className="map-info-box">
<div className="parking-inner-container">
<div className="parking-inner">
<div className="parking-container">
<div className="parking-image-wrapper">
<div className="parking-image"
style={{ 'backgroundImage': `url(${marker.photos})` }}
/>
</div>
</div>
</div>
</div>
<div className="parking-info">
<div className="parking-title">
<h5><b>${marker.rate} {marker.infoContent}</b></h5>
</div>
<div className="parking-location">
<h2>{`${marker.description.substring(0, descriptionLentgh)}...`}</h2>
</div>
<div className="">
<h2 className="label label-default" style={marker.secured === false
? { backgroundColor: 'gray', fontSize: '100%' }
: { backgroundColor: 'green', fontSize: '100%' } }
>
{marker.secured === false ? 'open' : 'secured'}</h2>
</div>
</div>
</div>
</div>
</InfoWindow>
)}
</Marker>
))}
</GoogleMap>
))
class GoogleMaps extends React.Component {
constructor(props) {
super(props)
this.state = {
center: {
lat: 47.853287,
lng: -93.646775
},
markers: [],
true: true
}
}
componentWillReceiveProps(nextProps) {
this.setState({ markers: [], center: nextProps.bound.location }, () => {
const m = nextProps.pageNo - 1
if (nextProps.markers[0] !== undefined) {
let obj = {}
let newArray = []
for (let i = m * num10; i <= nextProps.markers.length; i++) {
if (i === m * num10 + num10) { break }
obj = {
position: { lat: nextProps.markers[i].loc[1], lng: nextProps.markers[i].loc[0] },
rate: nextProps.markers[i].spaces[0].rate,
infoContent: nextProps.markers[i].listingName || nextProps.markers[i].spaces[0].name,
showInfo: false,
photos: nextProps.markers[i].photos[0],
description: nextProps.markers[i].basic_details.notes,
secured: nextProps.markers[i].isSecured,
markerIcon: false
}
newArray = this.state.markers
newArray.push(obj)
this.setState({ markers: newArray })
}
} else {
this.setState({ markers: this.props.markers })
}
})
}
handleMarkerClick(targetMarker) {
this.setState({
markers: this.state.markers.map((marker) => {
if (marker === targetMarker) {
return {
...marker,
showInfo: true,
markerIcon: true
}
} else {
return {
...marker,
showInfo: false
}
}
})
})
}
handleMarkerClose(targetMarker) {
this.setState({
markers: this.state.markers.map((marker) => {
if (marker === targetMarker) {
return {
...marker,
showInfo: false
}
}
return marker
})
})
}
handleMarkerClose2(targetMarker) {
this.setState({
markers: this.state.markers.map((marker) => {
if (targetMarker) {
return {
...marker,
showInfo: false
}
}
return marker
})
})
}
onWindowClick() {
console.log('fdgdsfg')
}
render() {
return (<div>
<div id="mapcanvas"
className="col-md-6"
style={{ 'height': '556px', 'width': '674px', paddingLeft: '0px', paddingRight: '0px' }}
>
<GettingStartedGoogleMap
containerElement={<div style={{ height: '100%' }} />}
mapElement={<div style={{ height: '100%' }} />}
//onMapLoad={_.noop}
onMapClick={this.handleMarkerClose2.bind(this)}
onMarkerClick={this.handleMarkerClick.bind(this)}
markers={this.state.markers}
center={this.state.center}
//onMarkerRightClick={this.handleMarkerRightClick.bind(this)}
onMarkerClose={this.handleMarkerClose.bind(this)}
/>
</div>
<style>{'\
.gm-style-iw + div {\
display: none;\
left: 26px;}\
'}</style>
</div>)}
}
GoogleMaps.propTypes = {
markers: React.PropTypes.array
}
export default GoogleMaps

Answer 1

I just ran into this issue some days ago and seems that the only way to attach an onClick to an InfoWindow is with google.maps.event in place.
I used 'react-dom/server' to set the content of it, where content is a React.Component.
Here you have an example:
const info = new googleMaps.InfoWindow({
map,
disableAutoPan: true,
maxWidth: 300,
content: ReactDom.renderToString(content)
});
google.maps.event.addListener(info, 'domready', () => {
document.querySelector('.gm-style-iw').addEventListener('click', onClick);
});