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 : []
    ... <your code>
    return <div> 
    ... <your code>
       {markers.map(({ A, B, M, N, L,O }) => {
          return (
            <Marker
                onClick={this.onMarkerClick}
                name={A}
                info={B}
                priority={L}
                position={{ lat: M, lng: N }}
               story={O}
            />
          );
        })}
    ... <your code>
    </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 (
        <Marker
          onClick={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 (
        <Marker
          onClick={this.onMarkerClick}
          name={A}
          info={B}
          priority={L}
          position={{ lat: M, lng: N }}
          story={O}
        />
      );
    }) : null}