React-google-maps + redux - InfoWindow on marker click - google-maps

Question

I am trying to have same effect on my page as here react-google-map demo. I used react-google-maps. The thing is I am fetching data with markers' informations and I don't know how can I handle click that will show/hide InfoWindow. Probably the reason is somewhere with state, I don't know how to make variable "isShown" true/false for each marker in markers array. Here is my code:
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={16}
defaultCenter={props.defCenter}
onClick={props.onMapClick}
>
{props.markers.map((marker,i) => (
<Marker
key={i}
position={marker.location}
time={marker.time}
onClick={() => props.onMarkerClick(marker)}
// HERE I TRIED SOMETHING LIKE marker.isShown=true; but it is NOT WORKING
>
{
<InfoWindow>
<div className="marker-text">{marker.time}</div>
</InfoWindow>
}
</Marker>
))}
</GoogleMap>
));
class GettingStartedExample extends Component {
componentDidMount(){
this.props.fetchMarkers();
}
state = {
markers: this.props.markers,
};
handleMapLoad = this.handleMapLoad.bind(this);
handleMarkerClick = this.handleMarkerClick.bind(this);
handleMapLoad(map) {
this._mapComponent = map;
if (map) {
console.log(map.getZoom());
}
}
handleMarkerClick(targetMarker) {
/*
* All you modify is data, and the view is driven by data.
* This is so called data-driven-development. (And yes, it's now in
* web front end and even with google maps API.)
*/
const nextMarkers = this.state.markers.filter(marker => marker !== targetMarker);
console.log(targetMarker.showInfo)
this.setState({
markers: nextMarkers,
});
}
render() {
return (
<div className='container map-container'>
<GettingStartedGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
onMapLoad={this.handleMapLoad}
markers={this.props.markers}
onMarkerClick={this.handleMarkerClick}
defCenter={{lat: 50.07074, lng: 19.915718}}
/>
</div>
);
}
}
GettingStartedExample.propTypes={
markers: React.PropTypes.array.isRequired,
fetchMarkers: React.PropTypes.func.isRequired
}
function mapStateToProps(state){
return{
markers:state.markers
}
}
export default connect(mapStateToProps,{fetchMarkers})(GettingStartedExample);
Currently it looks like this:
Markers with InfoWindow
On my final effect I would like to have InfoWindow on the newest marker and handle click that allows you to show/hide InfoWindows on all markers.
How can I achieve that showing/hiding InfoWindow on each marker?
Thanks a lot for any help!

Answer 1

you can try this
i am getting markers array in nextProps and so set it into the state
you can use your own markers array
import React from 'react'
import { Link } from 'react-router'
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
const num10 = 10
const GettingStartedGoogleMap = withGoogleMap((props) => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={10}
center={props.center}
onClick={props.onMapClick}
>
{props.markers.map((marker, index) => (
<Marker
key={index}
position={marker.position}
onClick={() => props.onMarkerClick(marker)}
{...marker}
//onRightClick={() => props.onMarkerRightClick(index)}
>
{marker.showInfo && (
<InfoWindow onCloseClick={() => props.onMarkerClose(marker)}>
<div className="">
myinfowindow
</div>
</InfoWindow>
)}
</Marker>
))}
</GoogleMap>
))
class GoogleMaps extends React.Component {
constructor(props) {
super(props)
this.state = {
center: {
lat: 33.6890603,
lng: -78.8866943
},
markers: [],
true: true
}
}
componentWillReceiveProps(nextProps) {
this.setState({ markers: [] }, () => {
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, id: nextProps.markers[i]._id
}
newArray = this.state.markers
newArray.push(obj)
this.setState({ markers: newArray,
center: { lat: nextProps.markers[0].loc[1],
lng: nextProps.markers[0].loc[0]
}
})
}
} 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
})
})
}
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%' }} />}
onMapClick={this.handleMarkerClose2.bind(this)}
onMarkerClick={this.handleMarkerClick.bind(this)}
markers={this.state.markers}
center={this.state.center}
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 2

try this: (props.showInfoIndex == index ) instead of ( props.isOpen )
{props.nhatro.map((nhatro, index) =>
<Marker
key={index}
options={{icon: 'https://i.imgur.com/9G5JOp8.png'}}
position={nhatro}
onClick={()=>{ props.showInfo(index)} }
>
{ (props.showInfoIndex == index ) &&
<InfoWindow onCloseClick={props.onToggleOpen}>
<div>
<div>nhà trọ cho thuê</div>
<div >1.500.000đ</div>
</div>
</InfoWindow>}
</Marker>
)}
use showInfo fnc to setState :
showInfo(a){
setState({showInfoIndex: a })
}

Answer 3

hey your info window is child component, if u want to open infowindow just make info window equivalent to the marker class and make any child component as you want
try this:
<Map
google={this.props.google}
style={style}
initialCenter={{
lat: lat,
lng: lng
}}
zoom={zoom}
onClick={this.onMapClicked}
>
{marker && marker.map((marker, index) => (
<Marker
key={index}
onClick={this.onMarkerClick}
title={marker.place_id}
name={marker.place_name}
position={{ lat: marker.place_latitude, lng: marker.place_longitude }} >
{
<div></div>
}
</Marker>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}>
<div>
<h3>{this.state.selectedPlace.name}</h3>
</div>
</InfoWindow>
</Map>