React google maps marker click event toggle class

Question

I'm building a google map with clickable markers with the marker info hide in div elements. I want to have each marker toggle the "hide" class I created.

Here is how my Map renders:

render() {
if (!this.props.loaded) {
  return <div>Loading...</div>
}

return (

  <div style={style}>

    <div className="profile-container">
      <div className="marker-profile hide">
        <h1>{this.state.selectedPlace.name}</h1>
        <h5>{this.state.selectedPlace.tag}</h5>
        <h5>{this.state.selectedPlace.hours}</h5>
        <h5>{this.state.selectedPlace.address}</h5>
        <p><a href={this.state.selectedPlace.website} className="enter">{this.state.selectedPlace.website}</a></p>
      </div>
    </div>

    <Map
      item
      xs={12}
      google={this.props.google}
      onClick={this.onMapClick}
      zoom={13}
      initialCenter={{ lat: 39.3643, lng: -74.4229 }}>

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'Salvation Army'}
          address={'22 S. Texas Avenue'}
          hours={'Mon-Fri 9am-11:45am & 1pm-3pm'}
          phone={'609-344-0660'}
          website={'https://www.salvationarmy.org'}
          position={{lat: 39.3549, lng: -74.4429}} />

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'Turning Point'}
          tag={'Day Center for Homeless'}
          address={'1717 Bishop Richard Allen Avenue'}
          hours={'Mon-Sat 8am-10pm & 2pm-1pm'}
          phone={'609-428-6163'}
          website={'https://www.facebook.com/TurningPointDayCenter'}
          position={{lat: 39.3656463, lng: -74.43630430000002}} />

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'Zion Redevelopment'}
          address={'525 Atlantic Avenue'}
          hours={'Wed 11am-1pm'}
          phone={'609-348-9304'}
          position={{lat: 39.366664, lng: -74.41770839999998}} />

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'AC Rescue Mission'}
          address={'2009 Bacharach Boulevard'}
          hours={'Mon-Sun 10-11:30am'}
          phone={'609-345-5517'}
          website={'https://www.acrescuemission.org'}
          position={{lat: 39.3650061, lng: -74.44001409999998}} />
      </Map>
  </div>
)}}

I was trying to use jQuery to create the click event, but for some reason I couldn't get it to trigger. Basically, on marker click I what to toggle hide and show the "profile-container" class. Any suggestions would be most appreciated.

Sorry I didn't have access to add a comment anywhere. Can you show your onMarkerClick handler. It would be appreciated if you share your code with codesandbox So we can complete your task, thanks — Sakhi Mansoor, Aug 20 '18 at 10:10

score 0 · Answer 1 · answered Aug 22 '18 at 00:17

I figured out the solution, I had to do a couple of things:

I created a constructor that sets the show state to false.

code:

constructor(props) {
super(props)

this.state = { show : false };

this.onMarkerClick = this.onMarkerClick.bind(this)}

Then bound it to the onMarkerClick handler.

I added the show option to the onMarkerClick handler.

onMarkerClick = (props, marker, e) => {
const { show } = this.state;
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  show : !show
})}

Finally, I wrap my div I wanted to hide in a JSX expression and added the onClick method to each marker.

   { this.state.show &&
      <div className="profile-container">
        <div className="marker-image">
          <img className="marker-img" src={this.state.selectedPlace.img} alt={this.state.selectedPlace.name} />
          <h1>{this.state.selectedPlace.name}</h1></div>
        <div className="marker-profile">
          <h1><i className="fas fa-map-marker map-icon-marker"></i>{this.state.selectedPlace.address}</h1>
          <div className="maker-profile-body">
            <h5 className="one"><i className="fas fa-phone map-icon-marker"></i>{this.state.selectedPlace.phone}</h5>
            <h5 className="two"><i className="fas fa-globe map-icon-marker"></i><a href={this.state.selectedPlace.website} className="enter">Website</a></h5>
            <h5 className="third"><i className="fas fa-door-open map-icon-marker"></i>{this.state.selectedPlace.hours}</h5>
          </div>
        </div>
      </div> }

React google maps marker click event toggle class

1 Answers1