A Toggle Button On And Off For Markers In Google Maps React

I want to create button that removes all markers for the google maps react, i already have it working for the heatmap but it does not let me do the same strategy for the markers ?

Solution 1:

As you already have handleToggle1 function setting the isMarkerVisible flag then on render() you can have this:

render() { 
    const markers = this.state.isMarkerVisible ? this.props.policeCall : []
    ... <yourcode>
    return <div> 
    ... <yourcode>
       {markers.map(({ A, B, M, N, L,O }) => {
          return (
            <MarkeronClick={this.onMarkerClick}name={A}info={B}priority={L}position={{lat:M, lng:N }}
               story={O}
            />
          );
        })}
    ... <yourcode></div>
}

All the ellipsis is your code but for brevity I only added where you will need to make changes to toggle markers.

Solution 2:

Change

{this.props.policeCall.map(({ A, B, M, N, L,O }) => {
      return (
        <MarkeronClick={this.onMarkerClick}name={A}info={B}priority={L}position={{lat:M, lng:N }}
          story={O}
        />
      );
    })}

to

{this.state.isMarkerVisible ? this.props.policeCall.map(({ A, B, M, N, L,O }) => {
      return (
        <MarkeronClick={this.onMarkerClick}name={A}info={B}priority={L}position={{lat:M, lng:N }}
          story={O}
        />
      );
    }) : null}